fxwing/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'; // createSignal

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

// count is a getter function, useSignal returns a getter and a setter
return <div>{count()}</div>;

useUpdate

import { useUpdate } from 'solid-react'; // createEffect

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

// this effect prints count at the beginning and when it changes
useUpdate(() => console.log('count:', count()));

useAuto

import { useAuto } from 'solid-react'; // createMemo

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

// read value
value();

useMount

import { useMount } from 'solid-react'; // onMount

// register a method that runs after initial render
useMount(() => console.log('mounted'));

useCleanup

import { useCleanup } from 'solid-react'; // onCleanup

el.addEventListener(event, callback);

// register a cleanup method that runs when unmount
useCleanup(() => el.removeEventListener(event, callback));

Run

import { Run } from 'solid-react';

// for conditional operator or functions in jsx
<div>{Run(() => (a() ? b() : c()))}</div>;
<div>{Run(() => Object.keys(obj())).map((e) => e)}</div>;