marsidev / react-hooks

A collection of common React hooks. Made with TypeScript.

@marsidev/react-hooks

Introduction

This is a collection of common React Hooks that I use in my React projects.

Bootstraped with antfu/starter-ts.

Inspired by usehooks-ts, @restart/hooks, and @chakra-ui/hooks.

Installation

• Using npm

  npm i @marsidev/react-hooks

• Using pnpm

  pnpm add @marsidev/react-hooks

• Using yarn

  yarn add @marsidev/react-hooks

Example

import { useScrollY } from '@marsidev/react-hooks'
import { Header, Footer, ScrollToTop } from '~/components'

export const Layout = ({ children }) => {
  const { offsetPassed } = useScrollY(400)

  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
      {offsetPassed && <ScrollToTop />}
    </div>
  )
}

Available Hooks

• useCopyElementToClipboard
• useCopyToClipboard
• useInput
• useRendered
• useSafeLayoutEffect
• useScrollY
• useWindowSize