@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 kida @kidajs/react
# or
npm i kida @kidajs/react
# or
yarn add kida @kidajs/react

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>
}

InjectionContextProvider

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

import { provide } from 'kida'
import { InjectionContextProvider, useInject } from '@kidajs/react'

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

function App() {
  return (
    <InjectionContextProvider context={[provide($Theme, 'dark')]}>
      <TopBar />
    </InjectionContextProvider>
  )
}

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>
}

hook

hook function creates a hook to inject a dependency.

import { hook } from '@kidajs/react'

const useTheme = hook($Theme)

function TopBar() {
  const theme = useTheme()

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