Comments (2)
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.
Related Issues (19)
- plan of chiness translate 🇨🇳 HOT 1
- powerplug HOT 3
- Looking for mechanism to style based on `disabled` prop HOT 2
- ignore invalid arguments to `increment/decrement/etc.` HOT 2
- add `max/min` props to <NumberValue> components
- Can't call setState (or forceUpdate) on an unmounted component
- How is it different from react power-plug ? HOT 2
- Change main entry to dist HOT 1
- add <ObjectValue> helper
- add "connected" values HOT 1
- rename `<AnyValue>` to just `<Value>`
- Travis CI build failing
- ArrayValue example
- add `disabled` prop HOT 1
- Don't mutate "value" HOT 2
- Memoize render props HOT 3
- TypeScript definitions. HOT 4
- readme.md for Documentation and Contributing links right ❓ HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-values.