A collection of React + TypeScript utility hooks
npm install the-captains-hooks 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 (
<>
>
)
}
``