Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More β†’
Socket
Sign inDemoInstall
Socket

usehooks-ts

Package Overview
Dependencies
Maintainers
1
Versions
60
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

usehooks-ts

React hook library, ready to use, written in Typescript.

  • 3.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
984K
increased by8.89%
Maintainers
1
Weekly downloads
Β 
Created

What is usehooks-ts?

The usehooks-ts package provides a collection of commonly used React hooks, making it easier to manage state, side effects, and other functionalities in React applications.

What are usehooks-ts's main functionalities?

useLocalStorage

The useLocalStorage hook allows you to manage state that is synchronized with localStorage. This is useful for persisting state across page reloads.

import { useLocalStorage } from 'usehooks-ts';

function App() {
  const [value, setValue] = useLocalStorage('key', 'default value');

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>{value}</p>
    </div>
  );
}

useWindowSize

The useWindowSize hook provides the current width and height of the window, updating in real-time as the window is resized. This is useful for responsive design.

import { useWindowSize } from 'usehooks-ts';

function App() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Width: {width}</p>
      <p>Height: {height}</p>
    </div>
  );
}

useDebounce

The useDebounce hook delays updating the state until after a specified delay. This is useful for optimizing performance in scenarios like search input where you don't want to trigger a search on every keystroke.

import { useDebounce } from 'usehooks-ts';
import { useState } from 'react';

function App() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
}

Other packages similar to usehooks-ts

Keywords

FAQs

Package last updated on 04 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc