props to attach functions to events

[vitordino]

🚀 Feature request

Motivation

I’m refactoring a codebase to use reakit’s component underneath, and I keep missing some props that are common on controlled components (eg.: form inputs)..

as we have a visible "value" prop both on state and components (eg.: useHiddenState and used on <Hidden/> itself), in my opinion, we should have a declarative way to attach other functions (side effects) to its events — something as onShow, onHide and onToggle props.

Example

const state = useDialogState({
  onShow: () => console.log('i’m showing'),
  onHide: () => console.log('i’m hiding'),
  onToggle: e => console.log(`i’m ${e.visible ? 'showing' : 'hiding'}`),
})

Possible implementations

this feature probably would be implemented by first plugging some props to useHiddenState then, if necessary, for each state hook that implements new functions.

[open-collective-bot[bot]]

Hey @vitordino 👋,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us ❤️.

[vitordino]

currently i’m dealing with a custom hook on top of reakit’s hooks, and it looks like this:

const noop = () => ({})

export const useDialogStateWithAttachedEvents = ({
  onShow = noop,
  onHide = noop,
  onToggle = noop,
  ...props
}) => {
  const state = useDialogState(props)

  const show = e => {
    state.show(e)
    onShow(e)
  }

  const hide = e => {
    state.hide(e)
    onHide(e)
  }

  const toggle = e => {
    state.toggle(e)
    onToggle(e)
  }

  return { ...state, show, hide, toggle }
}

[diegohaz]

I usually suggest this approach:

const state = useDialogState();

React.useEffect(() => {
  if (state.visible) {
    // onShow
  } else {
    // onHide
  }
}, [state.visible]);

Related: https://spectrum.chat/reakit/general/how-to-react-on-dialog-events~710e0748-288e-4196-a030-2243eede50ca

You can also create something like useUpdateEffect to handle only updates.

But, yes, wapping it within an enhanced hook is also a good option.

[vitordino]

nice @diegohaz thanks for your fast reply, it really helped me 🙌 ..

just to be clear, we don’t plan on putting these props on the official API, right?
if so, i think we may tag this as a question and close it

[diegohaz]

Yes, right now I don't think it makes sense including this in the API as this is easily doable in the user land. But I'm glad that you opened the issue so more people can find it if they have a similar need. :)