@kidajs/react v1.0.0-alpha.2

@kidajs/react

Kida integration for React.

import { signal } from 'kida'
import { useSignal } from '@kidajs/react'

const $user = signal<User | null>(null)

export function UserProfile() {
  const user = useSignal($user)

  return <div>{user?.name}</div>
}

Install

pnpm add -D kida
# or
npm i -D kida
# or
yarn add -D kida

Exports

useSignal

useSignal hook returns the current value of the signal store and subscribes to changes.

import { signal } from 'kida'
import { useSignal } from '@kidajs/react'

const $user = signal<User | null>(null)

export function UserProfile() {
  const user = useSignal($user)

  return <div>{user?.name}</div>
}

InjectionContext

InjectionContext is a component to initialize injection context and provide dependencies to the children.

import { InjectionContext, useInject } from '@kidajs/react'

function Theme(): 'light' | 'dark' {
  return 'light'
}

function App() {
  return (
    <InjectionContext providers={[[Theme, 'dark']]}>
      <TopBar />
    </InjectionContext>
  )
}

useInject

useInject hook returns the value of the dependency.

import { useInject } from '@kidajs/react'

function TopBar() {
  const theme = useInject(Theme)

  return <div>Current theme: {theme}</div>
}

useAction

useAction hook creates an action that runs within the current injection context.

import { signal } from 'kida'
import { useInject, useAction } from '@kidajs/react'

function Theme() {
  return signal<'light' | 'dark'>('light')
}

function setThemeAction(theme: 'light' | 'dark') {
  const $theme = useInject(Theme)

  $theme(theme)
}

function TopBar() {
  const setTheme = useAction(setThemeAction)

  return (
    <button onClick={() => setTheme('dark')}>
      Switch to dark theme
    </button>
  )
}