The Captain's Hooks

![Build Status](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 tbd
- useEventListener tbd
- useFocus
- useHover
- useLockBodyScroll tbd
- useOnClickOutside tbd
- useOnScreen tbd
- useScrollTo
- useWindowSize tbd

$3

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 ;

}





Alternatively:

 tsx

const ExampleComponent: React.FC = props => {

  const [focused, focusMethods] = useFocus();

  return (

          value={focused.toString()}

      readOnly

      onFocus={focusMethods.onFocus}

      onBlur={focusMethods.onBlur}

    />

  );

}





$3



Almost identical to 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 (

    

      {hover.toString()}

    

  );

}





Alternatively:

 tsx

const ExampleComponent: React.FC = props => {

  const [hovered, hoverMethods] = useHover();

  return (

          mouseOver={hoverMethods.mouseOver}

      mouseOut={hoverMethods.mouseOut}

    >

      {hover.toString()}

    

  );

}





$3



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

 tsx

const ExampleComponent: React.FC = props => {

  const ref = React.useRef(null);

  const scrollTo = useScrollTo(ref);



  return (

    <>