Atomique

芥子纳须弥 The smallest may hold the largest

An atomic state management prototype for React 18+

Install

• With npm/yarn/pnpm

# via npm
npm i atomique

# via yarn
yarn add atomique

# via pnpm
pnpm i atomique

• With jsr

# via npx
npx jsr add @ds/atomique

# via deno
deno add @ds/atomique

# via yarn
yarn dlx jsr add @ds/atomique

# via pnpm
pnpm dlx jsr add @ds/atomique

# via bun
bunx jsr add @ds/atomique

Introduction

The atomique accept a initial value and return 3 things:

• useAtom - a useState like hook that can be used inside React components
• get - a function that can be used outside components to get the current value
• update - a function that can be used outside components to set the current value

[!NOTE] The atomique function can accept complex values other than string, number, such as array and object. It is based on the hook useSyncExternalStore in React 18

Usage

• count.js

import atomique from 'atomique'

// import atomique from '@ds/atomique' // With jsr

export const { useAtom: useCount, update } = atomique(0)

• count-button.jsx

import { useCount } from '/path/to/use-count'

export default function CountButton() {
  const [, setCount] = useCount()
  return <button onClick={() => setCount(c => c + 1)}>
    +
  </button>
}

• count-display.jsx

import { useCount } from '/path/to/use-count'

export default function CountDisplay() {
  const [count] = useCount()
  return <h3>Count is: {count}</h3>
}

• App.jsx

import CountButton from '/path/to/count-button'
import CountDisplay from '/path/to/count-display'

export default function App() {
  return <div>
    <CountDisplay />
    <CountButton />
  </div>
}

LICENSE

MIT