https://github.com/yoavniran/recoil-spring
Jumpstart Recoil - less boilerplate, more fun.
https://github.com/yoavniran/recoil-spring
hooks reactjs recoil state-management
Last synced: 30 days ago
JSON representation
Jumpstart Recoil - less boilerplate, more fun.
- Host: GitHub
- URL: https://github.com/yoavniran/recoil-spring
- Owner: yoavniran
- License: mit
- Created: 2022-12-05T13:24:45.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T09:53:27.000Z (over 3 years ago)
- Last Synced: 2025-10-10T18:37:42.803Z (8 months ago)
- Topics: hooks, reactjs, recoil, state-management
- Language: JavaScript
- Homepage:
- Size: 854 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Recoil:Spring
[](https://github.com/yoavniran/recoil-spring/actions/workflows/recoil-spring-ci.yml)
Jumpstart Recoil - less boilerplate, more fun.
Contents
* [Intro](#intro)
* [Documentation](#documentation)
* [Installation](#installation)
* [Quick Start](#quickstart)
* [Acknowledgements](#acknowledgements)
## Intro
Think React Toolkit or MobX State Tree but for Recoil. Opinionated but not too much :)
no dependencies (beyond peers: React & Recoil)
Tiny !
## Documentation
See docs site -
## Quick Start
The best place to find details of the Recoil:Spring API is at the doc site mentioned above.
However, this section highlights the main concepts and usage.
### Spring
Two ways to initialize: Object-map or chained calls.
Both code examples below are identical in their outcome:
```javascript
```
```javascript
```
### Atom Family
One of Recoil's more useful yet cumbersome entities is the Atom Family. It's extremely useful for storing data over a collection.
Yet, Recoil doesn't provide a way to track the items within the collection. Their docs explain that a custom atom should be employed to do that.
Spring does this seamlessly when encountering a Family record.
### Selectors
### Simple Selector
Below is an example of the simplest read/write selector hook
```javascript
import { createSelectorHook } from "recoil-spring";
import atoms from "../store";
const {
borderColor
} = atoms;
const useCollageBorderColor = createSelectorHook(borderColor);
//recoil:spring will generate a selector key using the atom's key.
//If you'd like to set your own key do the following:
const useCollageBorderColor = createSelectorHook("MyCustomBorderColorSelector", borderColor);
export default useCollageBorderColor;
```
```jsx
import useCollageBorderColor from "./store/selectors/useCollageBorderColor";
const MyComponent = () => {
const [borderColor, setBorderColor] = useCollageBorderColor();
return (
setBorderColor(parseInt(e.target.value))}
/>
);
};
```
#### Computed
Below is an example of a computed selector, combining two atoms into one result:
```javascript
import { createSelectorHook } from "recoil-spring";
import atoms from "../store";
const {
borderWidth,
borderColor,
} = atoms;
const useCollageBorder = createSelectorHook(
//need to provide a key for the selector since we use a custom getter
"CollageBorderSelector",
(get) => [get(borderColor), get(borderWidth)],
);
export default useCollageBorder;
```
Using the resulting readonly selector hook is done in the following way:
```jsx
import useCollageBorder from "./store/selectors/useCollageBorder";
const MyComponent = () => {
const [color, width] = useCollageBorder();
return (
//...
);
};
```
#### Custom Setter
Below is a selector hook that reads one (atom) value but writes to two atoms.
Using it works exactly the same as any other read/write hook
```javascript
import { createSelectorHook } from "recoil-spring";
import atoms from "../store";
const {
width,
height,
} = atoms;
const useDimensions = createSelectorHook(
width,
(newVal, { set }) => {
set(width, newVal);
set(height, newVal);
},
);
export default useDimensions;
```
## Acknowledgements
logo's spring thanks to: Spring icons created by Zaenul Yahya - Flaticon