https://github.com/alsiola/react-understated
https://github.com/alsiola/react-understated
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/alsiola/react-understated
- Owner: alsiola
- License: mit
- Created: 2018-04-15T12:37:22.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-18T21:58:08.000Z (about 8 years ago)
- Last Synced: 2025-01-02T20:36:15.753Z (over 1 year ago)
- Language: TypeScript
- Size: 120 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-understated
This is some experimentation around creating an alternative React state API. If it is useful then it could be published.
## Try it out locally
```
git clone https://github.com/alsiola/react-understated.git
cd react-understated
yarn
yarn start
```
## The Basics
We all love functional components in React (well I do anyway). We don't love having to refactor them into class components just to add a little bit of state management. The idea here is to abstract that state management into its own component, and pass the resulting state, and functions to alter it as arguments to a render function.
### A Boolean Toggle
````
const MyComponent = () => (
{({ state: { toggle }, setters }) => (
<>
This library is {isItGood ? "AWESOME-O" : "weaksauce"}
Flip it
>
)}
)
````
By providing commonly used functions to update state (like toggle above), we minimise the amount of repeated logic throughout an application. A common scenario is getting the value of an input when it changes:
### Managing a form component
````
const MyComponent = () => (
{({ state: { name }, setters }) => (
<>
My name is: {name}
>
)}
)
````
There are a few other built in state helpers. I might even document them at some point. More excitingly you can provide your own!
### Making your own state helper
Let's square a number!
````
const MyComponent = () => (
x * x
}}
>
{({ state: { size }, setters }) => (
<>
The number is {size}.
Square me
>
)}
)
````
Because I am a kind person who spent a few hours writing ridiculous TypeScript, your custom helpers are still type-safe! If you try and pass a state property to square that isn't a number then boom, compiler error.
### Higher Order Component
We all love functional purity and referential transparency. I mean I do, and you'd be silly to disagree with me. Understated's higher order component can give you a pretty little API that looks like I would like it to:
```
const MyComponent = (props, { state, setters }) => (
{props.name}
);
export default HOC({
initialState: {
name: "Alex"
}
})(MyComponent);
```
Typescript support comes via the USComponent type:
```
interface MyPropsInterface {
name: string;
}
interface MyStateInterface {
age: number;
}
const MyComponent: USComponent = ({ name }, { state: { age }, setters }) => (
<>
{props.name} is {age} years old!
Click on {name}'s birthday
>
);
export default HOC({
initialState: {
name: "Alex"
}
})(MyComponent);
```