https://github.com/ashish-simplecoder/mini-jotai

A mini version of Jotai (A state management library for react)
https://github.com/ashish-simplecoder/mini-jotai

jotai react react-hooks state-management typescript vitest

Last synced: 1 day ago
JSON representation

A mini version of Jotai (A state management library for react)

• Host: GitHub
• URL: https://github.com/ashish-simplecoder/mini-jotai
• Owner: Ashish-simpleCoder
• License: mit
• Created: 2023-12-01T08:00:08.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-12-08T06:06:59.000Z (11 months ago)
• Last Synced: 2023-12-08T07:26:39.829Z (11 months ago)
• Topics: jotai, react, react-hooks, state-management, typescript, vitest
• Language: TypeScript
• Homepage:
• Size: 73.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mini-Jotai

### Inspired with `jotai` (an awesome state management library) [read more about it](https://jotai.org/).

### Big Thanks to `BlueCollarCoder` (an awesome youtuber) for making a tutorial on how to build core-jotai from scratch. [channel link](https://www.youtube.com/@jherr).

### Here's the video link for the video. (https://www.youtube.com/watch?v=gg31JTZmFUw)

## Features

- Written in Typescript

- Components are type-safe

- Small and easy to use

- Share states globally without React.context

- Hooks for getting the state with subscription

- Test cases written

## Components

- `atom` (for creating the atoms)

- `useAtom` (getting the state and setter function for provided atom)

- `useAtomValue` (getting only the state for provided atom)

- `useAtomDispatch` (getting only the setter function for provided atom)

## Examples

### Usage with `atom` and `useAtom`

```tsx

import { atom, useAtom } from "mini-jotai";

const counterAtom = atom(10);

export default function Counter() {

  const [counter, setCounter] = useAtom(counterAom);

  return (

    


      
{counter}

      

          setCounter((old_counter) => {

            old_counter++;

            return old_counter;

          })

        }

      >

    

  );

}

```


### Usage with `atom`, `useAtomValue` and `useAtomDispatch`

```tsx

import { atom, useAtom } from "mini-jotai";

const userAtom = atom({ name: "ashish" });

export default function Counter() {

  // providing the getter-callback for getting the specific item from the atom

  const username = useAtomValue(userAom, (user) => user.name);

  //   atom setter function for updating the atom

  const setUser = useAtomDispatch(userAtom);

  //   if getter-callback is not provided, then `user` object will be output

  const user = useAtomValue(userAtom);

  return (

    


      

          setUser((old_user) => {

            old_user.name = e.target.value;

            return { ...old_user };

          })

        }

      />


      
User:- {JSON.stringify(user)}

    

  );

}

```


# Note

- working examples available in `examples` directory in root of the projects.