Hooks

Reusable React Hooks

SHIVMS UI provides reusable hooks that simplify state management, responsiveness, accessibility, and common UI behaviors while keeping your components clean and maintainable.

Example
import { useTheme } from "@shivms/ui";

export default function App() {
    const {
        theme,
        toggleTheme,
    } = useTheme();
}

Available Hooks

useTheme

Manage light and dark themes across your application.

useMediaQuery

Detect responsive breakpoints with media queries.

useClickOutside

Detect clicks outside an element.

useFocus

Manage focus state and keyboard accessibility.

useClipboard

Copy text to the clipboard with ease.

useLocalStorage

Persist state using the browser's local storage.

Example Usage

Import a hook from SHIVMS UI and use it in your components to simplify common UI behavior.

import {
    Button,
    useTheme,
} from "@shivms/ui";

export default function App() {
    const {
        theme,
        toggleTheme,
    } = useTheme();

    return (
        <Button
            onClick={toggleTheme}
        >
            Current Theme: {theme}
        </Button>
    );
}

Why Use Hooks?

01

Reusable Logic

Share common behavior across components without duplicating code.

02

Better Developer Experience

Write cleaner React components with less boilerplate.

03

Production Ready

Hooks are designed to be reusable, accessible, and easy to maintain.

Continue Reading

Explore more SHIVMS UI documentation and guides.

Getting Started

Learn what SHIVMS UI is and how to begin.

Installation

Install the library into your project.

Hooks

Reusable React hooks for state, themes and responsiveness.

Icons

Use built-in icons throughout your application.

Theming

Configure light and dark themes.

Utilities

Reusable helper functions for everyday development.

Accessibility

Build accessible user interfaces.

Customization

Customize colors, spacing and components.

Changelog

See what's new in each release.