@elsoul/fresh-atom
@elsoul/fresh-atom
is a lightweight global state management library inspired
by Recoil and Jotai, specifically designed for use in
Deno's Fresh framework.
Leveraging Preact's signal
under the hood, it enables efficient state updates
and reactivity, ideal for edge-native applications.
atom
and useAtom
, similar to
Jotai.signal
for performance-optimized
reactivity.To install and use @elsoul/fresh-atom
in your project, you can import it
directly from the JavaScript Standard Registry (JSR) or from the Deno land:
import { atom, useAtom } from 'jsr:@elsoul/fresh-atom'
import { atom, useAtom } from 'https://deno.land/x/fresh_atom/mod.ts'
@elsoul/fresh-atom
allows you to create shared state in your Fresh application
with minimal effort. Here's how you can create and use atoms.
Atoms hold a single piece of state. You can define an atom like this:
import { atom } from '@elsoul/fresh-atom' const countAtom = atom(0) // Create an atom with an initial value of 0
To read and modify the atom's value inside a component, you can use useAtom
:
import { useAtom } from '@elsoul/fresh-atom' export default function Counter() { const [count, setCount] = useAtom(countAtom) return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ) }
The state will automatically update whenever the atom's value changes, ensuring efficient re-rendering.
You can also define an asynchronous atom that resolves after some operation:
import { atom } from '@elsoul/fresh-atom' const asyncAtom = atom(async () => { const data = await fetchData() return data })
You can then use useAtom
in the same way to handle asynchronous state.
Bug reports and pull requests are welcome on GitHub at https://github.com/elsoul/fresh-atom This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
The package is available as open source under the terms of the Apache-2.0 License.
Everyone interacting in the SKEET project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.
Add Package
deno add jsr:@elsoul/fresh-atom
Import symbol
import * as fresh_atom from "@elsoul/fresh-atom";
---- OR ----
Import directly with a jsr specifier
import * as fresh_atom from "jsr:@elsoul/fresh-atom";
Add Package
npx jsr add @elsoul/fresh-atom
Import symbol
import * as fresh_atom from "@elsoul/fresh-atom";
Add Package
yarn dlx jsr add @elsoul/fresh-atom
Import symbol
import * as fresh_atom from "@elsoul/fresh-atom";
Add Package
pnpm dlx jsr add @elsoul/fresh-atom
Import symbol
import * as fresh_atom from "@elsoul/fresh-atom";
Add Package
bunx jsr add @elsoul/fresh-atom
Import symbol
import * as fresh_atom from "@elsoul/fresh-atom";