Guide

Welcome to the React Hooks and Utils by ZL Asica! This guide will help you integrate and utilize the library in your React projects.

Installation

To get started, install the package via npm, yarn, pnpm, bun, or deno from JSR:

# With npm
npm install @zl-asica/react
# With yarn
yarn add @zl-asica/react
# With pnpm
pnpm add @zl-asica/react
# With bun
bun add @zl-asica/react

// With deno from JSR
import { useLocalStorage } from 'jsr:@zl-asica/react'

Usage

Here are some examples to help you get started:

Example 1: useToggle

Toggle between true and false easily (default value is false):

import { useToggle } from '@zl-asica/react'

const ToggleExample = () => {
  const [isToggled, toggle] = useToggle()

  return (
    <button type="button" onClick={toggle}>
      {isToggled ? 'ON' : 'OFF'}
    </button>
  )
}

export default ToggleExample

---

Example 2: useFetch

Simplify API calls with built-in error and loading states:

import { useFetch } from '@zl-asica/react'

const FetchExample = () => {
  const { data, error, loading } = useFetch('https://api.example.com/data')

  if (loading) {
    return <p>Loading...</p>
  }
  if (error) {
    return (
      <p>
        Error:
        {error.message}
      </p>
    )
  }

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

export default FetchExample

---

Example 3: useLocalStorage

Persist state to localStorage with ease:

import { useLocalStorage } from '@zl-asica/react'

const LocalStorageExample = () => {
  const [value, setValue] = useLocalStorage('key', 'default value')

  return (
    <div>
      <p>
        Value:
        {value}
      </p>
      <button type="button" onClick={() => setValue('new value')}>
        Set New Value
      </button>
    </div>
  )
}

export default LocalStorageExample

---

Explore More

Check out the Docs to learn more about available hooks and utilities.