Make props in react / vue packages reactive

[enawork]

Is your feature request related to a problem? Please describe.

Yes, the issue is related to the event handlers (onBeforeStart, onBeforeDrag, onStart, onMove, onStop) within the SelectionArea component not having access to the latest props when the parent component's props change. As a result, the event handlers only reference the props at the initial mount of the component.

Describe the solution you'd like

An approach to solve this issue is to include the event handlers in the dependency array of the useEffect that sets up the event handlers. This ensures that the useEffect would run every time any of the event handlers changes, causing the event listeners to be re-set with the latest props.

Example:

useEffect(() => {  
  ...  
}, [onBeforeStart, onBeforeDrag, onStart, onMove, onStop]);  

Describe alternatives you've considered

An alternative solution is to wrap the event handler functions with useRef inside the SelectionArea component. This will allow the handlers to reference the latest props whenever they are executed without the need to re-run the useEffect. Here's an example for onStart:

const onStartRef = useRef<SelectionEvents['start'] | undefined>(null);  
  
useEffect(() => {  
  onStartRef.current = onStart;  
});  
  
// Then, inside the useEffect where the event handlers are set up:  
onStart && selection.on('start', (event) => {  
  if (onStartRef.current) {  
    onStartRef.current(event);  
  }  
});  

Additional context

The current implementation may cause unexpected behavior for users who expect the event handlers to always reference the latest props. By implementing the suggested solution, the component will provide a more consistent and expected behavior.
Please note that this issue and the proposed solutions were created by an AI and have not been tested. It is recommended to test the suggested changes before implementing them in the actual codebase.

[enawork]

After some trial and error, I managed to create the following React wrapper for my project, and by importing @viselect/vanilla, I was able to workaround the issue mentioned above.

SelectionArea.js

/* eslint-disable no-use-before-define */
import VanillaSelectionArea from '@viselect/vanilla'
import React from 'react'

export default function SelectionArea (props) {
  const { onBeforeStart, onBeforeDrag, onStart, onMove, onStop, ...opt } = props
  const root = React.createRef()

  const onBeforeStartRef = React.useRef()
  const onBeforeDragRef = React.useRef()
  const onStartRef = React.useRef()
  const onMoveRef = React.useRef()
  const onStopRef = React.useRef()

  React.useEffect(() => {
    onBeforeStartRef.current = onBeforeStart
    onBeforeDragRef.current = onBeforeDrag
    onStartRef.current = onStart
    onMoveRef.current = onMove
    onStopRef.current = onStop
  })

  React.useEffect(() => {
    const areaBoundaries = root.current

    const selection = new VanillaSelectionArea({
      boundaries: areaBoundaries,
      ...opt
    })

    onBeforeStart && selection.on('beforeStart', (event) => {
      if (onBeforeStartRef.current) {
        onBeforeStartRef.current(event)
      }
    })
    onBeforeDrag && selection.on('beforedrag', (event) => {
      if (onBeforeDragRef.current) {
        onBeforeDragRef.current(event)
      }
    })
    onStart && selection.on('start', (event) => {
      if (onStartRef.current) {
        onStartRef.current(event)
      }
    })
    onMove && selection.on('move', (event) => {
      if (onMoveRef.current) {
        onMoveRef.current(event)
      }
    })
    onStop && selection.on('stop', (event) => {
      if (onStopRef.current) {
        onStopRef.current(event)
      }
    })

    return () => selection.destroy()
  }, [])

  return (
    React.createElement('div', { ref: root, className: props.className, id: props.id }, props.children)
  )
}

I believe it would look like this in TypeScript:
https://gist.github.com/enawork/84c0d88fb2e34ed232dbeeb603fedd9c#file-selectionarea-tsx

[simonwep]

Thanks for the elaborative feature request, I'll label this as a bug since I would expect this to be reactive either way... I'll take a look at it :)