add hooks support about react-values HOT 2 OPEN

Just to sketch out the API ideas... we'll want to be able to provide the absolute simplest API for the common case of just tracking some internal state:

import { useBoolean } from 'react-values'

function Toggle() {
  const enabled = useBoolean(false)
  return (
    <Track enabled={enabled.value} onClick={() => enabled.toggle()}>
      <Thumb enabled={enabled.value} />
    </Track>
  )
}
...

But in doing so, we're losing a bit of the niceness that this library provides around automatically handling the "controlled vs. uncontrolled" problem for you. Because for UI components, it's really nice to be able to use these value hooks to avoid having to think about "controlled-ness". But for that, we need to be able to pass defaultValue and value. So we'd introduce a useControllable* variant:

import { useControllableBoolean } from 'react-values'

function Toggle(props) {
  const enabled = useControllableBoolean(props)
  return (
    <Track enabled={enabled.value} onClick={() => enabled.toggle()}>
      <Thumb enabled={enabled.value} />
    </Track>
  )
}

And then finally, we still want to also keep the "connected" concept that is currently available, allowing you to share state across the React tree. To do that, we'd expose createConnected* factories that return React hook functions:

import { createConnectedBoolean } from 'react-values'

const useEnabled = createConnectedBoolean(false)

function Toggle() {
  const enabled = useEnabled()
  return (
    <Track enabled={enabled.value} onClick={() => enabled.toggle()}>
      <Thumb enabled={enabled.value} />
    </Track>
  )
}

from react-values.

You could remove the createConnected* factories and let the user handle the "connected" concept via Context. It's a well documented pattern and removes complexity from react-values. What do you think @ianstormtaylor ?

import React from 'react';
import { useBoolean } from 'react-values';

+ const Context = React.createContext(null);

function Toggle() {
+  const enabled = React.useContext(Context);
  return (
    <Track enabled={enabled.value} onClick={() => enabled.toggle()}>
      <Thumb enabled={enabled.value} />
    </Track>
  )
}

function App() {
  return (
+    <Context.Provider value={useBoolean()}>
      <Toggle />
      <Toggle />
    </Context.Provider>
  );
}

from react-values.