# the-captains-hooks

> A collection of React + TypeScript utility hooks

Latest version **0.0.8** (published 2019-09-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install the-captains-hooks
pnpm add the-captains-hooks
yarn add the-captains-hooks
bun add the-captains-hooks
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2019-09-10 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | OfficerHalf |
| Maintainers | officerhalf |

## Links

- npm: https://www.npmjs.com/package/the-captains-hooks
- Repository: https://github.com/OfficerHalf/the-captains-hooks
- Homepage: https://github.com/OfficerHalf/the-captains-hooks#readme
- Issues: https://github.com/OfficerHalf/the-captains-hooks/issues
- npm.io page: https://npm.io/package/the-captains-hooks

## Recent versions

- 0.0.8 (latest) — 2019-09-10
- 0.0.7 — 2019-08-29
- 0.0.6 — 2019-08-29
- 0.0.5 — 2019-08-29
- 0.0.4 — 2019-08-28
- 0.0.3 — 2019-08-28
- 0.0.1 — 2019-08-28

## README

# The Captain's Hooks

[![Build Status](https://travis-ci.org/OfficerHalf/the-captains-hooks.svg?branch=master)](https://travis-ci.org/OfficerHalf/the-captains-hooks)

A collection of React + TypeScript utility hooks, mostly stolen from the wonderful [useHooks][useHooks].

[useHooks]: https://usehooks.com/

## Hooks

- [useDebounce](#useDebounce) tbd
- [useEventListener](#useEventListener) tbd
- [useFocus](#useFocus)
- [useHover](#useHover)
- [useLockBodyScroll](#useLockBodyScroll) tbd
- [useOnClickOutside](#useOnClickOutside) tbd
- [useOnScreen](#useOnScreen) tbd
- [useScrollTo](#useScrollTo)
- [useWindowSize](#useWindowSize) tbd

### useFocus

Returns a boolean value reflecting the focus state and two methods to apply to the component to be watched.

``` tsx
const ExampleComponent: React.FC = props => {
  const [focused, focusMethods] = useFocus();
  return <input {...focusMethods} value={focused.toString()} readOnly />;
}
```

Alternatively:

``` tsx
const ExampleComponent: React.FC = props => {
  const [focused, focusMethods] = useFocus();
  return (
    <input
      value={focused.toString()}
      readOnly
      onFocus={focusMethods.onFocus}
      onBlur={focusMethods.onBlur}
    />
  );
}
```

### useHover

Almost identical to [useFocus](#useFocus), returns a boolean value reflecting the hover state and two methods to apply to the component to be watched.

``` tsx
const ExampleComponent: React.FC = props => {
  const [hovered, hoverMethods] = useHover();
  return (
    <div {...hoverMethods}>
      {hover.toString()}
    </div>
  );
}
```

Alternatively:

``` tsx
const ExampleComponent: React.FC = props => {
  const [hovered, hoverMethods] = useHover();
  return (
    <div
      mouseOver={hoverMethods.mouseOver}
      mouseOut={hoverMethods.mouseOut}
    >
      {hover.toString()}
    </div>
  );
}
```

### useScrollTo

Returns a method that scrolls a component with a given ref into view.

``` tsx
const ExampleComponent: React.FC = props => {
  const ref = React.useRef<HTMLDivElement>(null);
  const scrollTo = useScrollTo(ref);

  return (
    <>
      <div id="some-div" ref={ref} />
      <button onClick={scrollTo}>Scroll back to div</button>
    </>
  )
}
```

---
_Source: https://npm.io/package/the-captains-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._