Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jlalmes/simple-atom
Simple atomic state that can be updated outside of React components.
https://github.com/jlalmes/simple-atom
atomic jotai reactjs state zustand
Last synced: 3 months ago
JSON representation
Simple atomic state that can be updated outside of React components.
- Host: GitHub
- URL: https://github.com/jlalmes/simple-atom
- Owner: jlalmes
- License: mit
- Created: 2021-12-07T02:06:08.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-30T14:44:12.000Z (over 2 years ago)
- Last Synced: 2024-10-31T12:39:55.638Z (3 months ago)
- Topics: atomic, jotai, reactjs, state, zustand
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/simple-atom
- Size: 1.43 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
simple-atom
If Jotai & Zustand had a baby 👼
Simple atomic state that can be updated outside of the React life-cycle.
## Why use `simple-atom`?
- Update state **outside of a React component.**
- No need for React Context, store your atoms in **global scope**.
- **Familiar API**, identical usage to `React.setState`.
- First class **Typescript support**.
- It's simple, open source and it's tiny! **<250 bytes** gzipped.
## Installation
```bash
npm install simple-atom
```
Please ensure you have installed [`react`](https://github.com/facebook/react) at version `v16.8.0` or higher.
## Examples
#### Basic usage
```javascript
import React from 'react';
// Import 'simple-atom'
import { createAtom, useAtom } from 'simple-atom';
// Create an atom with 'createAtom'
const userAtom = createAtom({ name: 'James', age: 25 });
const MyComponent = () => {
// Get current value and setter function with 'useAtom' hook
const [user, setUser] = useAtom(userAtom);
if (!user) {
return
You are logged out
;
}
return setUser(null)}>Logout;
};
```
#### Update component state outside of React
```javascript
// == MyComponent.jsx ==
import React from 'react';
import { createAtom, useAtom } from 'simple-atom';
export const isLoadingAtom = createAtom(false);
const MyComponent = () => {
const [isLoading] = useAtom(isLoadingAtom);
if (isLoading) {
return (
Loading, please wait...
);
}
return (
// ...
);
}
// == other-application-file.js ==
import { isLoadingAtom } from './MyComponent.jsx';
// MyComponent will now re-render with the updated isLoading state
isLoadingAtom.value = true;
```
#### Subscribe to state changes
```javascript
import React from 'react';
import { createAtom, useAtom } from 'simple-atom';
const darkModeAtom = createAtom(() => {
if (typeof window === 'undefined') {
return false;
}
return window.localStorage.getItem('dark-mode') === 'true';
});
// Add a subscriber that is triggered on atom value change
darkModeAtom.subscribe((value) => {
window.localStorage.setItem('dark-mode', value.toString());
});
const MyComponent = () => {
const [darkMode, setDarkMode] = useAtom(darkModeAtom);
return setDarkMode(!darkMode)}>Toggle dark mode;
};
```
#### With Typescript
```typescript
import { createAtom } from 'simple-atom';
type User = { name: string; age: number } | null;
const userAtom = createAtom({ name: 'James', age: 25 });
```
## Acknowledgements
This package was inspired by these projects.
- [React](https://reactjs.org/docs/hooks-reference.html#usestate)
- [Jotai](https://github.com/pmndrs/jotai)
- [Zustand](https://github.com/pmndrs/zustand)
## Authors
- [James Berry (@jlalmes)](https://twitter.com/@jlalmes)
Contributions & PRs are always welcome! 🙌