Make props in react / vue packages reactive

[enawork]

Make props in react / vue packages reactive

[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 :)