Recoil-Next

A continuation of the Recoil state management library for React.

The official Recoil project is no longer maintained. This fork provides:

• Active maintenance and bug fixes
• React 18+ compatibility
• Full TypeScript support
• Modern build tooling (Vitest, Rollup, ESLint)

Installation

npm install recoil-next

Or with pnpm/yarn:

pnpm add recoil-next
# or
yarn add recoil-next

Quick Start

import {atom, selector, useRecoilState, useRecoilValue, RecoilRoot} from 'recoil-next';

// Define an atom
const countState = atom({
  key: 'countState',
  default: 0,
});

// Define a selector
const doubleCountState = selector({
  key: 'doubleCountState',
  get: ({get}) => get(countState) * 2,
});

// Use in components
function Counter() {
  const [count, setCount] = useRecoilState(countState);
  const doubleCount = useRecoilValue(doubleCountState);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Wrap your app with RecoilRoot
function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

Migration from Recoil

Replace recoil with recoil-next in your imports:

// Before
import {atom, selector, useRecoilState} from 'recoil';

// After
import {atom, selector, useRecoilState} from 'recoil-next';

All APIs remain identical to the original Recoil library.

Documentation

See the original Recoil documentation: https://recoiljs.org/docs/introduction/core-concepts

Examples

Check out the examples directory for usage examples.

Contributing

• Code of Conduct
• Contributing Guide

License

MIT