https://github.com/pyrossh/atoms-state

Simple State management for react
https://github.com/pyrossh/atoms-state

Last synced: 5 days ago
JSON representation

Simple State management for react

• Host: GitHub
• URL: https://github.com/pyrossh/atoms-state
• Owner: pyrossh
• License: mit
• Created: 2021-04-02T19:05:07.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-19T09:22:20.000Z (over 2 years ago)
• Last Synced: 2024-11-10T00:44:41.573Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 500 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# atoms-state

State management and common hooks

## Usage

```js

import React from 'react';

import ReactDOM from 'react-dom';

import { atom, useAtom } from 'atoms-state';

const countAtom = atom(10);

const sumAtom = atom((get) => get(countAtom) + 10);

const increment = () => {

  countAtom.update((count) => count + 1);

};

const decrement = () => {

  countAtom.update((count) => count - 1);

};

const Counter = () => {

  const count = useAtom(countAtom);

  const sum = useAtom(sumAtom);

  return (

    


      
Count: {count}

      
Sum: {sum}

      Inc

      Dec

    

  );

};


ReactDOM.render(, document.getElementById('root'));

```

## Async

```js

import React, { Suspense } from 'react';

import ReactDOM from 'react-dom';

import { asyncAtom, useAsyncAtom } from 'atoms-state';

const todoAtom = asyncAtom(async ({ id }) => {

  const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);

  return await res.json();

});

const completeTodo = () => {

  todoAtom.update((todo) => ({ ...todo, completed: !todo.completed }));

};

const Counter = () => {

  const todo = useAsyncAtom(todoAtom, { id: 1 });

  return (

    


      
id: {todo.id}

      
userId: {todo.userId}

      
title: {todo.title}

      
completed: {todo.completed}

      Toggle Complete

    

  );

};


ReactDOM.render(

  Loading}>

    

  ,

  document.getElementById('root'),

);

```