tessl/npm-recoil

Recoil is an experimental state management framework for React applications that provides atoms and selectors for fine-grained reactivity.

—

Pending

Overview

Eval results

Files

Root Provider

Name: tessl/npm-recoil
Author: tessl

The RecoilRoot component manages the Recoil state graph and provides the context for all Recoil hooks. Most Recoil functionality requires components to be nested inside a RecoilRoot.

Capabilities

RecoilRoot Component

Root component that manages Recoil state for all child components.

/**
 * Root component for managing Recoil state. Most Recoil hooks should be
 * called from a component nested in a <RecoilRoot>
 */
const RecoilRoot: React.FC<RecoilRootProps>;

type RecoilRootProps = {
  /** Function to initialize state when the root is created */
  initializeState?: (mutableSnapshot: MutableSnapshot) => void;
  /** Allow overriding an existing RecoilRoot */
  override?: true;
  children: React.ReactNode;
} | {
  /** Disable override, preventing nested RecoilRoots */
  override: false;
  children: React.ReactNode;
};

Usage Examples:

import React from 'react';
import { RecoilRoot, atom } from 'recoil';

// Basic usage
function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

// With state initialization
const userState = atom({
  key: 'userState',
  default: null,
});

function AppWithInitialization() {
  return (
    <RecoilRoot
      initializeState={({set}) => {
        set(userState, {id: 1, name: 'John'});
      }}
    >
      <MyComponent />
    </RecoilRoot>
  );
}

// Override existing root
function NestedApp() {
  return (
    <RecoilRoot override={true}>
      <ChildComponent />
    </RecoilRoot>
  );
}

Store ID Management

Hook for accessing the unique identifier of the current RecoilRoot store.

/**
 * Returns an ID for the currently active state store of the host <RecoilRoot>
 */
function useRecoilStoreID(): StoreID;

interface StoreID {
  readonly [StoreID_OPAQUE]: true;
}

Usage Examples:

import { useRecoilStoreID } from 'recoil';

function StoreInfo() {
  const storeID = useRecoilStoreID();
  
  // Use store ID for debugging or store coordination
  console.log('Current store ID:', storeID);
  
  return <div>Store: {JSON.stringify(storeID)}</div>;
}

Cross-Root Bridge

Experimental hook for sharing state across multiple React roots.

/**
 * Returns a component that acts like a <RecoilRoot> but shares the same store
 * as the current <RecoilRoot>
 */
function useRecoilBridgeAcrossReactRoots_UNSTABLE(): typeof RecoilBridge;

const RecoilBridge: React.FC<{children: React.ReactNode}>;

Usage Examples:

import { useRecoilBridgeAcrossReactRoots_UNSTABLE } from 'recoil';
import { createRoot } from 'react-dom/client';

function MainApp() {
  const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();
  
  // Create a new React root that shares Recoil state
  React.useEffect(() => {
    const container = document.getElementById('portal');
    const root = createRoot(container);
    
    root.render(
      <RecoilBridge>
        <PortalContent />
      </RecoilBridge>
    );
  }, [RecoilBridge]);
  
  return <div>Main App Content</div>;
}

Environment Configuration

Global environment settings for configuring Recoil behavior.

interface RecoilEnv {
  /** Enable checking for duplicate atom keys */
  RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: boolean;
  /** Set of enabled feature flags */
  RECOIL_GKS_ENABLED: Set<string>;
}

const RecoilEnv: RecoilEnv;

Usage Examples:

import { RecoilEnv } from 'recoil';

// Enable duplicate key checking (typically for development)
RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = true;

// Enable specific feature flags
RecoilEnv.RECOIL_GKS_ENABLED.add('recoil_memory_managament_2020');

Install with Tessl CLI