add hooks support

[ianstormtaylor]

Once hooks reaches the non-beta branches, react-values should expose themselves as hooks. And eventually we can deprecate the render prop approach.

[ianstormtaylor]

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>
  )
}

[stevenbenisek]

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>
  );
}