React Signals with Jotai

This provides a simple way to bind Jotai atoms to React intrinsic elements to get reactive pages, like the signals paradigm.

Please note that the current state of this package is a proof-of-concept; while it works quite well, there is no live demo and the API may change significantly.

Included in this package:

• Hooks for more easily working with computed Jotai state
  • useComputedAtom - same interface as Jotai's computed, but as a React hook with no dependencies
  • useAsAtom - converts a T | Atom<T> to an Atom<T> as a React hook, so your APIs can be flexible.
• Utilities for animation
  • animationSignal - provides updates per requestAnimationFrame (must subscribe to the animationSignal or call manuallyUpdateAnimationFrame)
  • manuallyUpdateAnimationFrame - function to manually trigger animationSignal updates when not subscribed (this prety well defeats the purpose of animations...)
  • tweenedSignal - tweens an Atom<number> via an EasingFunction (not provided, but see tween.js's Easing export for examples) using the animationSignal
• Utilities for binding to elements
  • withSignal - takes the name of a React intrinsic element and a mapping of React props to functions to update the element to create a new component that will update your element in real-time.
  • mapProperty - helper function for mapping a value to an element property
  • mapAttribute - helper function for mapping a value to an element attribute

Usage example, as a Storybook entry:

1import { Story, Meta } from '@storybook/react';
2import { useMemo } from 'react';
3import { useStore } from 'jotai';
4import {
5	tweenedSignal,
6	useComputedAtom,
7	mapAttribute,
8	type PartialMapping,
9	withSignal,
10	useAsAtom,
11} from '@mdekrey/jotai-react-signals';
12import { Easing } from '@tweenjs/tween.js';
13
14const sampleMapping = {
15	cx: mapAttribute('cx'),
16	cy: mapAttribute('cy'),
17	r: mapAttribute('r'),
18	strokeWidth: mapAttribute('stroke-width'),
19} satisfies PartialMapping;
20
21const AnimatedCircle = withSignal('circle', sampleMapping);
22
23type Props = {
24	size: number;
25};
26
27export default {
28	title: 'Example/Jotai Signals',
29	argTypes: {
30		size: {
31			control: {
32				type: 'number',
33			},
34		},
35	},
36	parameters: {},
37} as Meta<Props>;
38
39const Template: Story<Props> = (args) => {
40	const store = useStore();
41	const size$ = useAsAtom(args.size);
42	const tweenedSize$ = useMemo(
43		() => tweenedSignal(store, size$, Easing.Quadratic.Out),
44		[store, size$]
45	);
46	const strokeWidth$ = useComputedAtom((get) => get(tweenedSize$) / 15);
47	return (
48		<svg width="300px" height="300px">
49			<AnimatedCircle
50				cx={150}
51				cy={150}
52				r={atom((get) => get(tweenedSize$).toFixed(3))}
53				strokeWidth={atom((get) => get(strokeWidth$).toFixed(3))}
54				stroke="red"
55				fill="none"
56			/>
57		</svg>
58	);
59};
60
61export const Primary = Template.bind({});
62Primary.args = {
63	size: 30,
64};