DEV Community: Roman Garmider 💛💙

Managing array state in React with custom hooks

Roman Garmider 💛💙 — Sat, 06 May 2023 15:42:54 +0000

When working with complex data, it's common to use arrays to store and manipulate collections of objects. However, managing arrays in React can be painful, especially when it comes to updating, deleting, or inserting elements.

For example, let's say you have an array of objects representing a list of users, and you want to update one of them based on user input. You need to find the index of the item to update, create a copy of the original array, update the item in the copy, and finally set the state of the original array to the updated copy. This process can be error-prone, verbose, and hard to read and understand.

To make this process simpler and more reusable, I decided to write my own custom hook called useArray. This hook must provide a set of functions to manipulate arrays of objects, including adding, updating, and deleting items.

So, I created my own package called Reactivous that includes a range of hooks and plugins designed specifically for React. I believe you may find this package helpful as well. However, we will discuss it in more detail later on.

So let's begin!

useArray

First of all, install the package:

npm install reactivous

# or

yarn add reactivous

Import useArray from the package:

import { useArray } from 'reactivous';

function FruitsList() {
  const { state, remove, push, update } = useArray(
    ['apple', 'banana', 'orange']
  );

  return (
    <div>
      <ul>
        {state.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <button onClick={() => push('grape')}>Add Grape</button>
      <button onClick={() => remove(1)}>Remove Second Fruit</button>
      <button onClick={() => update(0, 'pineapple')}
        >Update Apple</button>
    </div>
  );
}

export default FruitsList

In this example, we're passing an initial array of fruits to the useArray hook, which returns an object containing the current reactive state of the array (state) as well as methods to manipulate it (push, remove, and update). We're rendering the array from the state as an unordered list using the map method. Finally, we're using these methods to add a grape to the array, remove the second fruit(passing index of banana), and update the first fruit (passing index of apple and the new fruit to second argument) to a pineapple.

Additionally, this hook provides the regular setState method you are familiar with using the useState hook. So you can use it to update the state:

const { setState } = useArray(['apple', 'banana']);

function clearState() {
  setState([])
}

function resetState() {
  setState(['apple', 'banana'])
}

So look not so difficult to implement, but what happens when you have an array of objects?

useObjectsArray

The useObjectsArray hook is designed to manage arrays of objects(or records) unlike useArray which can manage all kinds of items. It provides all the methods from useArray and two additional methods: removeAll and updateAll.
These methods are very useful when you want to find items based on their properties, and not on their index.
The removeAll method removes all objects in the array that match the given key.
The updateAll method updates all objects in the array that match the first given key with the properties of the second given object.

Here is an example of using the useObjectsArray hook in a component:

import { useObjectsArray } from 'reactivous';

function FruitsList() {
  const fruits = [
    { title: 'apple' }, 
    { title: 'banana' }, 
    { title: 'orange' }
  ]

  const { state, removeAll, push, updateAll } = useObjectsArray(fruits);

  return (
    <div>
      <ul>
        {state.map((value, index) => (
          <li key={index}>{value.title}</li>
        ))}
      </ul>
      <button onClick={() => push({ title: 'grape' })}>Add Grape</button>
      <button onClick={() => removeAll({ title: 'grape'})}>Remove All Grapes</button>
      <button onClick={() => updateAll({ title: 'apple' }, { title: 'pineapple' })}
        >Update Apple</button>
    </div>
  );
}

export default FruitsList

Conclusion

Reactivous is a package that provides a set of custom hooks and plugins for managing state and handling common tasks in React. I hope that you find these hooks useful and that they help simplify your React development process. I'm always looking to improve my library and add new hooks, so please feel free to share your thoughts and feature requests with me.

Also follow me on Twitter at @thinkin_bot. I'll be sharing updates and new features as they're added to the library, and I'd love to hear your feedback and suggestions for future improvements.

Lastly, I want to mention that Reactivous is not only a helpful package for managing array state in React, but it also serves as a good example of using Vite and Vitest to build and test projects.

The simplest way to deal with modal dialogs in Vue 3

Roman Garmider 💛💙 — Sat, 07 May 2022 12:47:07 +0000

Modal dialogs are not such a difficult task to develop. They are often used to confirm user's action. For example, delete any data or perform authorization. This is a very monotonous and uninteresting job with repetitive logic that is sometimes copied from component to component with minor changes.

But what if you have dozens or even hundreds of similar dialogs on one page or even in the entire project? Or if you need to call dialogs in a chain depending on the user's choice? How to make a reusable function which also has readable and maintainable code?

It would be useful to create a function that would take a dialog component and control its rendering in the template. The function would return an object containing the state of the dialog and methods, so that it could be possible to work with it like with promises. For example, this plugin vue-modal-dialogs implements this functionality. Unfortunately, it has not been updated for a long time and does not support Vue 3.

Explore the new documentation site and let me know what you think about it! VCD-docs

In this guide I will introduce the vuejs-confirm-dialog plugin and show how to use it. I'll start with simple examples and end up with a function which completely abstracts the popup dialog to confirm an action and can be used in any component of your project. The examples are written in JavaScript for easy reading, but the plugin itself is in TypeScript. The plugin is fully typed and documented, which makes it much easier to work with it. Unlike vue-modal-dialogs, this plugin has additional functionality - special hooks: onConfirm and onCancel. They accept a callback and are called depending on the user's decision: onConfirm if the user agrees and onCancel if he refuses.

The end result can be seen in the sandbox. The code is slightly different from what is in the post.

Installation

Let's start by creating a new Vue 3 project. In the console:

vue create dialogs-guide

// Pick a second option

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

We have received a standard template for a new project. Next, go to the project folder and install the library according to the documentation in README.md.

npm i vuejs-confirm-dialog

Replace the code in main.js with this:

import { createApp } from 'vue'
import App from './App.vue'
import * as ConfirmDialog from 'vuejs-confirm-dialog'

createApp(App).use(ConfirmDialog).mount('#app')

Usage

Now let's move on to the App.vue file. Let's fix the template code first. We have to add the <DialogsWrapper/> component to the template, to make the plugin work, and remove the HelloWord:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <DialogsWrapper />
</template>

Now let's learn how to use the createConfirmDialog function. Use the new setup syntax for the script section. createConfirmDialog accept as the first argument a component that will be the modal dialog and the second will be an object which contains component props values. The function returns an object with methods for working with the modal window, so the reveal method renders the dialog box and onConfirm accepts the callback which will be called if the user clicks "agree". You can create a HelloWord component using the logo and pass the value of the msg prop:

// App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" @click="reveal">
  <DialogsWrapper />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { createConfirmDialog } from 'vuejs-confirm-dialog'

const { reveal } = createConfirmDialog(HelloWorld, { msg: 'Hi!'})
</script>

No additional logic is required. The component is rendered after calling the reveal function and disappears after the user responds to the dialog.

Real life example

Now let's write something closer to real use.

Let's create a new component SimpleDialog.vue in the components folder:

<template>
  <div class="modal-container">
    <div class="modal-body">
      <span class="modal-close" @click="emit('cancel')">🗙</span>
      <h2>{{ question }}</h2>
      <div class="modal-action">
        <button class="modal-button" @click="emit('confirm')">Confirm</button>
        <button class="modal-button" @click="emit('cancel')">Cancel</button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue'

  const props = defineProps(['question'])
  const emit = defineEmits(['confirm', 'cancel'])
</script>

<style>
  .modal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #cececeb5;
  }
  .modal-body {
    background-color: #fff;
    border: 2px solid #74a2cf;
    border-radius: 10px;
    text-align: center;
    padding: 20px 40px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
  }
  .modal-action {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
  }
  .modal-button {
    cursor: pointer;
    height: 30px;
    padding: 0 25px;
    border: 2px solid #74a2cf;
    border-radius: 5px;
    background-color: #80b2e4;
    color: #fff;
  }
  .modal-close {
    cursor: pointer;
    position: relative;
    align-self: end;
    right: -33px;
    top: -17px;
  }
</style>

Notice that two incoming events need to be added to the modal dialog to work properly: ['confirm', 'cancel'].

And now we use it to confirm an action, for example, to hide the logo. The logic of the code, which will be executed after the user's consent, will be placed in the onConfirm hook callback.

<template>
  <img v-show="showLogo" alt="Vue logo" src="./assets/logo.png">
  <button @click="reveal">Hide Logo</button>

  <DialogsWrapper />
</template>

<script setup>
import SimpleDialog from './components/SimpleDialog.vue'
import { createConfirmDialog } from 'vuejs-confirm-dialog'
import { ref } from 'vue'

const showLogo = ref(true)

const { reveal, onConfirm } = createConfirmDialog(SimpleDialog, { question: 'Are you sure you want to hide the logo?'})

onConfirm(() => {
  showLogo.value = false
})
</script>

Reusing

What if we have many cases where confirmation of some action is required? Do we need to call createConfirmDialog again every time?

No. It is possible to write a function which automates the process for us.

// src/composables/useConfirmBeforeAction.js
import SimpleDialog from './../components/SimpleDialog'
import { createConfirmDialog } from 'vuejs-confirm-dialog'

const useConfirmBeforeAction = (action, props) => {
  const { reveal, onConfirm } = createConfirmDialog(SimpleDialog, props)

  onConfirm(action)

  reveal()
}

export default useConfirmBeforeAction

Now we use it to confirm the following external links:

// App.vue

<template>
  <ul>
    <li v-for="(link, i) in LINKS" @click="goToLink(link)" :key="i">
      {{ link }}
    </li>
  </ul>
  <DialogsWrapper />
</template>

<script setup>
  import useConfirmBeforeAction from './composables/useConfirmBeforeAction'

  const LINKS = [
    'https://vuejs.org/',
    'https://github.com/',
    'https://vueuse.org/',
  ]

  const goToLink = (link) => {
    useConfirmBeforeAction(
      () => {
        window.location = link
      },
      { question: `Do you want to go to ${link}?` }
    )
  }

</script>

Conclusion

The createConfirmDialog function makes it easier to work with modal windows, reuse logic, and create chains of sequential dialogs. It takes care of rendering the modal window, passing incoming parameters to the component, and receiving data from it. It is very flexible and easy to customize it according to your needs.

These are not all its possibilities. For example, if the concept of hooks is not close to you, you can replace them with a promise that returns reveal.

And of course, for a better dev experience use it with TypeScript!

New functionality extention of useRefHistory in VueUse library

Roman Garmider 💛💙 — Wed, 15 Sep 2021 15:58:42 +0000

I would like to share with you my little joy. My suggestion for expanding the function useRefHistory by adding the delay effect to history snapshots was accepted by maintainers of VueUse. They trusted me to write a pull request. The new functionality is already available in VueUse (since version 6.3.3). But first things first.

Adventure story

In my last article, I wrote about useRefHistory and how to implement it in your application. Using the useRefHistory function, I noticed that its usability is not perfect. This function takes a snapshot of the data every time the slightest change occurs, even if it's just one letter. If you are writing a long text or a to-do list, make a mistake, and want to revert the changes, it is very inconvenient to press Undo for each letter. It would be better if the changes were saved with a small time delay.

I started looking for a solution. It seems that it lies on the surface - you just need to add setTimeOut to the watch which monitors data changes, but it turned out that this was not enough. watch also needs to skip changes that the undo and redo methods do to data, otherwise, this creates complete chaos!!!

Looking for a solution led me to the source code of the VueUse library itself. It turned out that the mechanisms for such functionality had already been laid down by the authors.

I opened a issue in the VueUse repository with a suggestion to add a new feature. The maintainers Anthony and Patak were very nice and professional. They supported my idea and entrusted me to write a pull request. They suggested to me how to implement it in the best way without breaking the style of the library. As a result, we came to a solution.

After the code review and some edits, the pull request was merged. Right now new functions already are available to you. Now I will tell you how to use them.

useDebouncedRefHistory

The main change I made in the useRefHistory functions is that now you can pass the eventFilter property in the options object to change the behavior of the function. Filters are internal helper structures of the library that you don't really need to learn. Unless you decide to contribute some code for VueUse by yourself. So, let's go straight to the practical.

useDebouncedRefHistory records the history of data changes with a specified delay. The delay is set in milliseconds and is passed to the options object. It can be wrapped in a ref object, then the delay will become reactive.

<script lang="ts">
  import { defineComponent, ref } from "vue"
  import { useDebouncedRefHistory } from "@vueuse/core"

  export default defineComponent({
    setup() {
      const note = ref({
        title: "",
        todos: []
      })

      const { undo, redo, canUndo, canRedo, clear } = useDebouncedRefHistory(
        note,
        { deep: true, clone: true, debounce: 1000 }
      )

      return {
        note,
        undo,
        redo,
        canUndo,
        canRedo,
        clear
      }
    }
  })
</script>

useThrottledRefHistory

This function is similar to the previous one, only with a throttle effect. This means that the history will be saved at the moment of data was changed, and the next time after the delay time passed. If the user doesn't stop making changes, they will be recorded every 1000 milliseconds. For example:

<!-- setup in script - some syntactic sugar that will make your life easier-->
<script setup>
  import { ref } from "vue"
  import { useThrottledRefHistory } from "@vueuse/core"

  const delay = ref(1000)
  const count = ref(0)

  const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(
    count,
    { throttle: delay }
  )
</script>

Update: (since version 6.4.0) a new property trailing now is available in the options (true by default). It determines whether to record history at the end of the time delay. If you want the watcher to react only to the first change, and then freeze the observation for a given time, then set trailing to false. Like this:

const DataHistory = useThrottledRefHistory(data, {
  throttle: 300,
  trailing: false
})

Conclusion

As you can see, the changes are not so vast in the codebase and logic, but they significantly improve the user experience. Use it wisely.

I find it very important to contribute our code to open source projects because we all use other people's work. Everyone can make a little assist to OS. This is what drives our industry further. In addition, this is an opportunity to work with world-class programmers and inherit some experience.

After all, it's nice to know that your code will be used by thousands of developers around the world.

VueUse as must-have library for Vue 3

Roman Garmider 💛💙 — Wed, 01 Sep 2021 11:26:15 +0000

For those who are unfamiliar with this library, I advise you to try it, as it can de facto become the standard for use in Vue 3 projects, as, for example, once there was a lodash library for almost any js projects.
Others have probably already checked out all the extensive functionality that it provides. Some have already used it in Vue 2, but not all new features support the old version. The library's arsenal is impressive, there are simple utilities like getting mouse coordinates, and various complex integrations with Firebase, Axios, Cookies, QR, local storage, browser, RxJS, animation, geolocation, extensions for standard Vue hooks, a media player and much more. Evan You himself is noted among the sponsors of the library, which seems to be a good sign. The library receives regular updates, bug fixes, and the community grows. So, it has everything for success.
In this article I will only talk about 4 features, but, of course, all the others need attention.

`onClickOutside` - clicks outside the element

I'm sure you can handle the installation of the library by yourself, so let's go straight to the interesting features. To warm up, consider a simple hook that tracks clicks outside a given element - onClickOutside. There are many packages that provide this functionality, and almost everyone has probably written that function by themselves. Usually it is implemented by adding a custom Vue directive to the desired element, for example v-clickOutside, but the use of a hook is unusual.
I used this hook in my todo app, in the ToDoItem.vue component:

<template>
  <li ref="todoItem">
    <input type="checkbox" />
    <span v-if="!editable" @click="editable = !editable">
      {{ todo.text ? todo.text : "Click to edit Todo" }}
    </span>
    <input
      v-else
      type="text"
      :value="todo.text"
      @keyup.enter="editable = !editable"
    />
  </li>
</template>

<script lang="ts">
  import { defineComponent, PropType, ref } from "vue"
  import ToDo from "@/models/ToDoModel"
  import { onClickOutside } from "@vueuse/core"

  export default defineComponent({
    name: "TodoItem",
    props: {
      todo: {
        type: Object as PropType<ToDo>,
        required: true
      }
    },
    setup() {
      const todoItem = ref(null)
      const editable = ref(false)

      onClickOutside(todoItem, () => {
        editable.value = false
      })

      return { todoItem, editable }
    }
  })
</script>

I removed the extra code to avoid distraction, but the component is still large enough. Pay attention to the code inside the setup hook, first we create an empty todoItem link, which we hang on the desired element in the template, and then we pass the first parameter to the onClickOutside hook, and the second parameter is a callback with the actions we need. When you click on the span tag, it will be replaced with an input tag, and if you click outside the li tag with the ref="todoItem" attribute, then the input will be replaced with a span tag.

`useStorage` and `createGlobalState` - reactive local storage

The next function I'll talk about is useStorage. This function allows data to be stored in Window.localStorage. It is convenient to use it in conjunction with createGlobalState, which is used to create a global storage. Now the data will be saved, updated and deleted automatically, and will not disappear after the page is reloaded. Below is the example of using these functions:

// @/store/index.ts
import { createGlobalState, useStorage } from '@vueuse/core'
import Note from '@/models/NoteModel'

// state
export const useGlobalNotes = createGlobalState(
  () => useStorage('my-notes', [] as Note[]),
)

// actions

const notes = useGlobalNotes() // for local use

export const addNote = function (note) {
  notes.value.push(note)
}

export const deleteGlobalNote = function (noteId: number) {
  notes.value = notes.value.filter(note => note.id != noteId)
}

The first parameter of the useStorage function accepts a key under which it will save your data in localStorage, and the second is initial value. createGlobalState creates a wrapper function to pass state to components. By calling this function (in our case it is useGlobalNotes()) in Vue-components or right here in this file, we will get a reactive list of notes. The notes array can be used as usual, remembering that since this is a proxy object, and the list itself is stored in notes.value. No need to add .value to markup templates in components.
For comparison, it's also helpful to see the useStorage example from the authors of the library. The difference is that in setup, you need to work with reactive storage not directly, but through its value property. In the html template, everything is as usual.

`useRefHistory` - history of changes

useRefHistory is a hook that will record the history of data changes and provide undo/redo functionality. I used it to create the Undo and Redo buttons on the note editing page. First, I created a reactive variable using ref. Let's take a closer look at the code:

<!--  Note.vue -->
<template>
  <!--  ...  -->
  <div>
    <button type="button" @click="undo" :disabled="!canUndo">Undo</button>
    <button type="button" @click="redo" :disabled="!canRedo">Redo</button>
  </div>
  <!--  ... -->
</template>

<script lang="ts">
    import { defineComponent } from "vue"
    import { useRefHistory } from "@vueuse/core"
    import ToDo from '@/models/ToDoModel'

    export default defineComponent({
      setup() {
        const note = ref({
                title: "",
                todos: [] as ToDo[]
              })
        const {
            undo,
            redo,
            canUndo,
            canRedo,
            clear
            } = useRefHistory(note, { deep: true })

        const updateTitle = (title: string) => {
            note.value.title = title
        }

        const addNewTodo = () => {
            note.value.todos.push({} as ToDo)
        }

        const onRemoveTodo = (index: number) => {
            note.value.todos.splice(index, 1)
        }

        return {
            note,
            addNewTodo,
            onRemoveTodo,
            updateTitle,
            undo,
            redo,
            canUndo,
            canRedo,
            clear
        }
    },
  })
</script>

We create a reactive variable using ref, pass it to the useRefHistory hook, denote deep: true in the hook parameters, for nested objects. Using destructuring assignment from useRefHistory we get history, undo, redo, canUndo, canRedo and clear. The canUndo and canRedo properties hang on the disabled attributes in buttons. clear - needed to clear history after finishing editing records. The useManualRefHistory hook does almost the same thing, but saving to history occurs only when the commit() command is called.

Conclusion

I have covered only 4 functions from the large arsenal of VueUse tools for Vue 3 development. For a more in-depth study, I advise you to visit the site of this wonderful library. While the documentation could still be improved, it is regularly being updated as well as the library itself.
The complete code of my polygon, where I tested this library, can be viewed here.

DEV Community: Roman Garmider 💛💙

Managing array state in React with custom hooks

useArray

useObjectsArray

Conclusion

The simplest way to deal with modal dialogs in Vue 3

Installation

Usage

Real life example

Reusing

Conclusion

New functionality extention of useRefHistory in VueUse library

Adventure story

useDebouncedRefHistory

useThrottledRefHistory

Conclusion

VueUse as must-have library for Vue 3

onClickOutside - clicks outside the element

useStorage and createGlobalState - reactive local storage

useRefHistory - history of changes

Conclusion

`onClickOutside` - clicks outside the element

`useStorage` and `createGlobalState` - reactive local storage

`useRefHistory` - history of changes