Jotai Resetter

Reset your jotai atoms to default values with ease

How to use jotai-resetter?

jotai-resetter makes it easy to reset your jotai atoms to their default values.

Initialize ResetProvider

First import the ResetProvider from jotai-resetter, and replace Provider from jotai with ResetProvider

// Replace
import { Provider } from "jotai";

<Provider>{/* App */}</Provider>;

// With
import { ResetProvider } from "jotai-resetter";

<ResetProvider>{/* App */}</ResetProvider>;

How to reset

To reset use the useResetJotai hook. It will return the reset function that you can call to reset all jotai atoms to their default values.

Component.tsx

import { useResetJotai } from "jotai-resetter";

function MyComponent() {
  const reset = useResetJotai();

  const handleReset = () => {
    // use reset function to reset jotai
    reset();
  };

  return (
    <button onClick={handleReset}>
      Reset All Atoms
    </button>
  );
}

With Next.js

To use jotai-resetter with Next.js you have to first make a CSR (Client Side Rendering) component for that.

provider.jsx

// provider.jsx
"use client";
import { ResetProvider } from "jotai-resetter";

export const Provider = ({ children }) => (
  <ResetProvider>{children}</ResetProvider>
);

Using Provider in Next.js

Now use this new Provider to wrap your app in your layout or root component.

layout.tsx

import { Provider } from "./provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Provider>
          {children}
        </Provider>
      </body>
    </html>
  );
}

Available props

ResetProvider supports all the native props of Provider from jotai, so you can pass any configuration you would normally pass to jotai's Provider.

App.tsx

import { ResetProvider } from "jotai-resetter";

function App() {
  return (
    <ResetProvider 
      store={customStore}
      // ... any other jotai Provider props
    >
      {/* Your app components */}
    </ResetProvider>
  );
}

That's it! Now your jotai atoms will be in their default state when you call the reset function.

Summary

✅ Import ResetProvider from jotai-resetter
✅ Replace jotai Provider with ResetProvider  
✅ Use useResetJotai hook to get reset function
✅ Call reset() to reset all atoms to default values