search

rafgraph / react-interactive

Better hover, active and focus states than CSS pseudo-classes, and a callback when the interactive state changes.
https://react-interactive.rafgraph.dev
MIT License
167 stars 8 forks source link

[idea] Hooks #20

Open DaniGuardiola opened 3 years ago

DaniGuardiola commented 3 years ago

Hi @rafgraph, I love this project, thanks for the suggestion!

I'm thinking that it'd be very convenient if we could have react-aria style hooks that provide the states. That could trim the bundle size quite a while and allow for better composability.

For example:

function MyButton() {
  const ref = useRef()
  const { isActive, buttonProps } = useActive(ref)
  return <button {...buttonProps} styles={{ background: isActive ? 'darkblue' : 'blue' }} />
}

This way, you can compose the states you want and nothing more, while retaining control over the rest of the implementation and the bundle size. It also unlock more composability with libs like Radix and react-aria. Plus, the hooks can still be used under the hood for the current API, so it probably wouldn't be a big refactor.

Let me know your thoughts! Thanks :)