https://github.com/shahabyazdi/rosma
Simple and easy-to-use state management for React.
https://github.com/shahabyazdi/rosma
management react react-native reactjs rosma state state-management
Last synced: 9 months ago
JSON representation
Simple and easy-to-use state management for React.
- Host: GitHub
- URL: https://github.com/shahabyazdi/rosma
- Owner: shahabyazdi
- License: mit
- Created: 2023-01-28T03:58:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-18T07:28:47.000Z (almost 2 years ago)
- Last Synced: 2024-11-25T03:19:50.198Z (over 1 year ago)
- Topics: management, react, react-native, reactjs, rosma, state, state-management
- Language: TypeScript
- Homepage: https://rosma.dev/
- Size: 683 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rosma
Simple and easy-to-use global state management for React. no need for provider, reducer or nothing else!
# Installation
```bash
npm i rosma
```
# Documentation
https://rosma.dev/
## Counter app
```javascript
import { useObserver } from 'rosma';
export default function Counter() {
const { count, setCount } = useObserver(0);
return setCount(count + 1)}>{count};
}
```
### No order for variables
```javascript
import { useObserver } from 'rosma';
export default function Counter() {
const { setCount, count } = useObserver(0);
return setCount(count + 1)}>{count};
}
```
The only concept that must be notice is that you must add a 'set' to the beginning of the setter name of the destructed variable.
For example if you want a setter method for the 'count' variable, you should name that setter as 'setCount'.
Also, all the destructed variables are case insensitive
```javascript
import { useObserver } from 'rosma';
export default function Counter() {
const { CouNt, setcOunT } = useObserver(0);
return setcOunT(Count + 1)}>{CouNt};
}
```
### Multiple destructuring
Destruct all the variables you want at once
```javascript
import { useObserver } from 'rosma';
export default function Counts() {
const { count, setCount, count1, setCount1 } = useObserver(0);
return (
<>
setCount(count + 1)}>{count}
setCount1(count1 + 1)}>{count1}
>
);
}
```
### Different initial values
In the example above, all the variables take the initial value of 0. to avoid this, one of the following methods can be used:
- Define the initial values separately
```javascript
import { useObserver } from 'rosma';
export default function Counts() {
const { count, setCount } = useObserver(10);
const { count1, setCount1 } = useObserver(20);
return (
<>
setCount(count + 1)}>{count}
setCount1(count1 + 1)}>{count1}
>
);
}
```
- Define the initial values at once
If you want to set the initial values and also destruct them at once, you can set the initial values directly from the observer.
```javascript
import { observer, useObserver } from 'rosma';
observer.set({ count: 10, count1: 20 });
export default function Counts() {
const { count, setCount, count1, setCount1 } = useObserver();
return (
<>
setCount(count + 1)}>{count}
setCount1(count1 + 1)}>{count1}
>
);
}
```
## Notes app
```javascript
import { useObserver } from 'rosma';
export default function Note() {
const { note = '', setNote, notes = [], setNotes } = useObserver();
return (
<>
setNote(e.target.value)} placeholder="write something" />
{
setNotes(notes.concat(note));
setNote('');
}}
>
Add
- {note}
{notes.map((note, index) => (
))}
>
);
}
```
### Avoiding extra rerender
If you want the entire main component not to be re-rendered with state changes, you can easily split the elements of the main component into smaller components using the withState method.
```javascript
import { withState } from 'rosma';
const Input = withState(({ note = '', setNote }) => setNote(e.target.value)} placeholder="write something" />);
const Button = withState(({ note, setNotes, setNote }) => (
{
setNotes((notes = []) => notes.concat(note));
setNote('');
}}
>
Add
));
const List = withState(({ notes = [] }) => (
- {note}
{notes.map((note, index) => (
))}
));
export default function Note() {
return (
<>
>
);
}
```
### Further optimization
To avoid extra rendering, you can read the values directly from the observer. In the example above, the Button component is re-rendered every time that the 'note' variable is changed. But you can avoid this extra rendering by reading the 'note' value from the observer.
```javascript
import { observer, withState } from 'rosma';
const Input = withState(({ note = '', setNote }) => setNote(e.target.value)} placeholder="write something" />);
const Button = withState(({ setNotes, setNote }) => (
{
setNotes((notes = []) => notes.concat(observer.get('note')));
setNote('');
}}
>
Add
));
const List = withState(({ notes = [] }) => (
- {note}
{notes.map((note, index) => (
))}
));
export default function Note() {
return (
<>
>
);
}
```