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};
}
`

$3

`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};
}
`

$3

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}

);
}
`

$3

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" />
onClick={() => {
setNotes(notes.concat(note));
setNote('');
}}
>
Add



{notes.map((note, index) => (

• {note}

))}



);
}
`

$3

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 }) => (
onClick={() => {
setNotes((notes = []) => notes.concat(note));
setNote('');
}}
>
Add

));

const List = withState(({ notes = [] }) => (


{notes.map((note, index) => (

• {note}

))}

));

export default function Note() {
return (
<>




);
}
`

$3

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 }) => (
onClick={() => {
setNotes((notes = []) => notes.concat(observer.get('note')));
setNote('');
}}
>
Add



));

const List = withState(({ notes = [] }) => (


{notes.map((note, index) => (

• {note}

))}

));

export default function Note() {
return (
<>




);
}
``