https://github.com/tetherto/pear-apps-lib-ui-react-hooks
PearPass is an open-source, privacy-first password manager with peer-to-peer syncing and end-to-end encryption. This repository contains shared core components used across the PearPass apps.
https://github.com/tetherto/pear-apps-lib-ui-react-hooks
Last synced: 3 months ago
JSON representation
PearPass is an open-source, privacy-first password manager with peer-to-peer syncing and end-to-end encryption. This repository contains shared core components used across the PearPass apps.
- Host: GitHub
- URL: https://github.com/tetherto/pear-apps-lib-ui-react-hooks
- Owner: tetherto
- License: apache-2.0
- Created: 2025-12-09T19:13:59.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-03-05T11:42:28.000Z (3 months ago)
- Last Synced: 2026-03-05T15:40:10.476Z (3 months ago)
- Language: JavaScript
- Homepage: https://pass.pears.com/
- Size: 216 KB
- Stars: 0
- Watchers: 0
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Notice: NOTICE
Awesome Lists containing this project
README
# 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](#features)
- [Installation](#installation)
- [Usage Examples](#usage-examples)
- [Dependencies](#dependencies)
- [Related Projects](#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
## Installation
```bash
npm install pear-apps-lib-ui-react-hooks
```
## Usage Examples
### useForm
```jsx
import { useForm } from '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 (
{errors.email && {errors.email}}
Submit
);
};
```
### useDebounce
```jsx
import { useDebounce } from '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 (
setSearchTerm(e.target.value)}
placeholder="Search..."
/>
);
};
```
### useThrottle
```jsx
import { useThrottle } from '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
Scroll content...;
};
```
### useCountDown
```jsx
import { useCountDown } from 'pear-apps-lib-ui-react-hooks';
const Timer = () => {
const timeRemaining = useCountDown({
initialSeconds: 60,
onFinish: () => alert('Time is up!'),
});
return
Time remaining: {timeRemaining};
};
```
## Dependencies
- React 18.3.1 or higher
## Depended Submodules
The following sibling submodules must be present in the workspace (they are not declared as npm dependencies):
- [`pear-apps-utils-generate-unique-id`](../pear-apps-utils-generate-unique-id)
- [`tether-dev-docs`](../tether-dev-docs)
## Related Projects
- [pearpass-app-mobile](https://github.com/tetherto/pearpass-app-mobile) - A mobile app for PearPass, a password manager
- [pearpass-app-desktop](https://github.com/tetherto/pearpass-app-desktop) - A desktop app for PearPass, a password
- [tether-dev-docs](https://github.com/tetherto/tether-dev-docs) - Documentations and guides for developers
## License
This project is licensed under the Apache License, Version 2.0. See the [LICENSE](./LICENSE) file for details.