The Reatom source registry
Good patterns.
Your source code.
Small, tested building blocks for Reatom. Add the pieces you need to your project, read every line, and adapt them as you go.
TypeScript source · MIT licensed · Distributed with jsrepo
# Start with the registry
npx jsrepo init github/reatom/reusables# Add a little history
npx jsrepo add withHistorySource added. Ready to make it yours.
The collection
Find your next building block.
15 reusables, ready to adapt
Extensions
09Focuses the first field with a validation error after a failed submit.
View source & docsAuto-submits a Reatom form after the user stops changing fields for a short time.
View source & docsAdds a handleSubmit action to a form for event-driven submission with an optional dirty-guard.
View source & docsWarns the user before leaving the page when the form has unsaved changes, using the browser's beforeunload event.
View source & docsAtom extension that tracks state history with configurable length.
View source & docsAtom extension that adds a lifecycle-managed .instance property derived from the atom's value.
View source & docsAtom/action extension that logs all state changes and action calls.
View source & docsExtend Reatom atoms and actions with WebMCP tool registration so browser AI agents can invoke application behavior through typed tools.
View source & docsAtom extension that adds a .reset() action to restore the atom to its initial value.
View source & docsUtilities
04Combines subscribe + wrap in one call, with automatic cleanup on component unmount.
View source & docsSwitches urlAtom to hash-based routing (#/path instead of History API paths). All existing routing logic works unchanged — only the browser URL format changes.
View source & docsConfigures urlAtom for Storybook: disables History API sync and restores the original iframe URL after every state change. Routing state still works internally — components respond to URL changes, links generate correct paths — but the iframe URL stays fixed so Storybook remains happy.
View source & docsA reusable testing utilities on top of Vitest API for Reatom applications that provides enhanced testing capabilities with automatic context management and subscription mocking.
View source & docsNo reusables found.
Try another name or choose a different type.
A few things to know
Copy it.
Understand it.
Make it yours.
Reusables live in your repository. You decide how they evolve.
Read the jsrepo docsHow does this work?
jsrepo copies TypeScript source into your project and resolves the files it depends on. You own the code and can change it to fit your application. It can also help you review and pull in upstream updates.
Do I have to use jsrepo?
No. Open any reusable to read its docs, examples, and source. Copy the files by hand if you prefer.
Can I include tests and examples?
Yes. Add --with-tests, --with-docs, or --with-examples to your add command. For example, npx jsrepo add withHistory --with-tests includes its tests and the shared Reatom test harness.
What makes a good reusable?
A focused pattern with a clear purpose, readable source, and tests. Integrations can have third-party dependencies. The source should be small enough for someone to understand and adapt.
Can I contribute?
Yes. Read the contribution guide and open a pull request with your implementation, documentation, example, and tests.