oney/solid-react

🧿 Hooks for a SolidJS-like React

🧿 solid-react

Hooks for a SolidJS-like React

Install

pnpm add solid-react
# or
yarn add solid-react
# or
npm i solid-react

Demo

API

useSignal

import { useSignal } from 'solid-react';

const [count, setCount] = useSignal(0);

const countDisplay = <div>{count()}</div>;

Returns a getter and a setter. (like createSignal)

useUpdate

import { useUpdate } from 'solid-react';

const [count, setCount] = useSignal(0);

useUpdate(() => console.log('count:', count()));

The callback runs at mount and when its dependencies change. (like createEffect)

useAuto

import { useAuto } from 'solid-react';

const value = useAuto(() => computeExpensiveValue(a(), b()));

value();

Returns a computed value getter, re-compute when dependencies change. (like createMemo)

useMount

import { useMount } from 'solid-react';

useMount(() => console.log('mounted'));

Register a method that runs after initial render. (like onMount)

useCleanup

import { useCleanup } from 'solid-react';

el.addEventListener(event, callback);

useCleanup(() => el.removeEventListener(event, callback));

Register a cleanup method that runs when unmount. (like onCleanup)

Run

import { Run } from 'solid-react';

<div>{Run(() => (a() ? b() : c()))}</div>;
<div>{Run(() => Object.keys(obj())).map((e) => e)}</div>;

A helper function for conditional operator or executions in jsx.