pear-apps-lib-ui-react-hooks

A collection of React hooks for Pearpass applications that simplify form handling, state management, and UI interactions.

Table of Contents

• Features
• Security Notice
• Installation
• Usage Examples
• Dependencies
• Related Projects

Features

• useForm: Form state management with validation, array fields, and nested values
• useDebounce: Delay state updates until after a specified delay
• useThrottle: Limit the frequency of state updates
• useCountDown: Create countdown timers with formatting

Security Notice

1. To ensure the security and integrity of your projects, please note that official PearPass packages are distributed exclusively through our GitHub organization.
2. Any packages with similar names found on the npm registry or other third-party package managers are not affiliated with PearPass and should be strictly avoided. We recommend installing directly from this repository to ensure you are using the verified, open-source version.

Installation

npm install git+https://github.com/tetherto/pear-apps-lib-ui-react-hooks.git

Usage Examples

useForm

import { useForm } from '@tetherto/pear-apps-lib-ui-react-hooks';

const MyForm = () => {
    const validate = (values) => {
        const errors = {};
        if (!values.email) errors.email = 'Email is required';
        return errors;
    };

    const { values, errors, register, handleSubmit } = useForm({
        initialValues: { email: '', password: '' },
        validate,
    });

    const onSubmit = (formValues) => {
        console.log('Form submitted:', formValues);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register('email')} />
            {errors.email && <span>{errors.email}</span>}
            <button type="submit">Submit</button>
        </form>
    );
};

useDebounce

import { useDebounce } from '@tetherto/pear-apps-lib-ui-react-hooks';

const SearchComponent = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const { debouncedValue } = useDebounce({ value: searchTerm, delay: 500 });

    useEffect(() => {
        // This will only run 500ms after the last change to searchTerm
        fetchSearchResults(debouncedValue);
    }, [debouncedValue]);

    return (
        <input
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="Search..."
        />
    );
};

useThrottle

import { useThrottle } from '@tetherto/pear-apps-lib-ui-react-hooks';

const InfiniteScroll = () => {
    const handleScroll = () => {
        // Load more content on scroll
    };

    const { throttle } = useThrottle({ interval: 300 });

    useEffect(() => {
        const throttledHandler = () => throttle(handleScroll);
        window.addEventListener('scroll', throttledHandler);
        return () => window.removeEventListener('scroll', throttledHandler);
    }, []);

    return <div>Scroll content...</div>;
};

useCountDown

import { useCountDown } from '@tetherto/pear-apps-lib-ui-react-hooks';

const Timer = () => {
    const timeRemaining = useCountDown({
        initialSeconds: 60,
        onFinish: () => alert('Time is up!'),
    });

    return <div>Time remaining: {timeRemaining}</div>;
};

Dependencies

• React 18.3.1 or higher

Related Projects

• @tetherto/pearpass-app-mobile - A mobile app for PearPass, a password manager
• @tetherto/pearpass-app-desktop - A desktop app for PearPass, a password
• @tetherto/tether-dev-docs - Documentations and guides for developers

License

This project is licensed under the Apache License, Version 2.0. See the LICENSE file for details.