Simple atomic state that can be updated outside of React components

by React

Simple Atom

Simple atomic state that can be updated outside React.

Why simple-atom?

  • Update state outside of a React component.

  • No need for React Context, store your atoms in global scope.

  • Familiar API, identical to React.setState.

  • First class Typescript support.

  • It’s simple, open source and it’s tiny! <250 bytes gzipped.

Installation

  npm install simple-atom

Please ensure you have installed react at version v16.8.0 or higher.

Usage

Basic example

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 (
            <h1>You are logged out</h1>
        );
    }

    return (
        <button onClick={() => setUser(null)}>
            Logout
        </button>
    );
}

Update component state outside of React

// 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 (
            <div>Loading, please wait...</div>
        );
    }

    return (
        // ...
    );
}

// misc-application-logic.js
import { isLoadingAtom } from './MyComponent.jsx'

// MyComponent will now re-render with the updated isLoading state
isLoadingAtom.value = true;

With Typescript

import { createAtom } from 'simple-atom';

type User = { name: string, age: number } | null;

const userAtom = createAtom<User>({ name: 'James', age: 25 });

Acknowledgements

This package was inspired by these projects.

Authors

Contributions are always welcome! ?

GitHub

View Github