react-util

📖 Description

This package provides reusable React hooks and context utilities for cleaner, faster development.

💯 Getting started

🔽 Instalation

npm install @sebastian-goat/react-util

📕 API

useTheme

A clean solution to handle dark mode in your aplications. It works by toggling classes 'system' | 'light' | 'dark' on the root (html) element.

Usage:

import Page from '@/pages/page';
import { ThemeProvider } from '@sebastian-goat/react-util';

export default function App() {
    
    return (
        <ThemeProvider>
            <Page />
        </ThemeProvider>
    );
}

import { useTheme } from '@sebastian-goat/react-util';

export default function ThemeToggleButton() {

    const [theme, setTheme] = useTheme();

    return (
        <div className='bg-[var(--bg-card)]'>
            <span>Current theme: {theme}</span>

            <button onClick={() => setTheme('light')}>Change to light</button>
            <button onClick={() => setTheme('dark')}>Change to dark</button>
            <button onClick={() => setTheme('system')}>Change to system</button>
        </div>
    );
}

useFetch

Sorry, no docs yet. 😭

useDebounce

Sorry, no docs yet. 😭

useLocalStorage

Sorry, no docs yet. 😭