recoil-next 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -0
- package/dist/index.cjs +427 -614
- package/dist/index.d.cts +3 -20
- package/dist/index.d.ts +3 -20
- package/dist/index.mjs +428 -615
- package/package.json +64 -65
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Recoil Next
|
|
2
|
+
|
|
3
|
+
A continuation of Facebook's Recoil state management library for React, maintained by the community after Meta discontinued the project.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
Recoil Next provides state management for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
|
|
8
|
+
|
|
9
|
+
## Key Features
|
|
10
|
+
|
|
11
|
+
- **Minimal and Reactish**: Recoil works and thinks like React. Add some to your app and get going.
|
|
12
|
+
- **Data-Flow Graph**: Derived data and asynchronous queries are tamed with pure functions and efficient subscriptions.
|
|
13
|
+
- **Cross-App Observation**: Implement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install recoil-next
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import React from 'react';
|
|
25
|
+
import { RecoilRoot, atom, useRecoilState } from 'recoil-next';
|
|
26
|
+
|
|
27
|
+
const textState = atom({
|
|
28
|
+
key: 'textState',
|
|
29
|
+
default: '',
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
return (
|
|
34
|
+
<RecoilRoot>
|
|
35
|
+
<CharacterCounter />
|
|
36
|
+
</RecoilRoot>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function CharacterCounter() {
|
|
41
|
+
const [text, setText] = useRecoilState(textState);
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div>
|
|
45
|
+
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
|
|
46
|
+
<p>Character count: {text.length}</p>
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## API Reference
|
|
53
|
+
|
|
54
|
+
### Core Concepts
|
|
55
|
+
|
|
56
|
+
- **Atoms**: Units of state that components can subscribe to
|
|
57
|
+
- **Selectors**: Pure functions that derive state from atoms or other selectors
|
|
58
|
+
- **RecoilRoot**: Provides context for Recoil state
|
|
59
|
+
|
|
60
|
+
### Hooks
|
|
61
|
+
|
|
62
|
+
- `useRecoilState(state)` - Returns a tuple of the state value and setter
|
|
63
|
+
- `useRecoilValue(state)` - Returns the state value
|
|
64
|
+
- `useSetRecoilState(state)` - Returns the state setter function
|
|
65
|
+
- `useResetRecoilState(state)` - Returns a function to reset state to default
|
|
66
|
+
|
|
67
|
+
## Migration from Recoil
|
|
68
|
+
|
|
69
|
+
This library is a drop-in replacement for the original Recoil library. Simply replace your import:
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
// Before
|
|
73
|
+
import { RecoilRoot, atom, useRecoilState } from 'recoil';
|
|
74
|
+
|
|
75
|
+
// After
|
|
76
|
+
import { RecoilRoot, atom, useRecoilState } from 'recoil-next';
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Requirements
|
|
80
|
+
|
|
81
|
+
- React 18.0.0 or later
|
|
82
|
+
|
|
83
|
+
## License
|
|
84
|
+
|
|
85
|
+
MIT
|
|
86
|
+
|
|
87
|
+
## Contributing
|
|
88
|
+
|
|
89
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
90
|
+
|
|
91
|
+
## Community
|
|
92
|
+
|
|
93
|
+
This is a community-maintained continuation of the original Recoil project. We aim to maintain compatibility while adding new features and improvements.
|