SiteOne Frontend Hooks

What is inside

• usedebounce
• useIsImageLoad
• useMouseOverWindow
• useInterval
• useFixOnScroll
• useLockBodyScroll

Install

$ yarn add @siteone/frontend-hooks

Testing

$ yarn test

• https://github.com/testing-library/react-hooks-testing-library/
• https://testing-library.com/docs/preact-testing-library/api

Find more here

• https://usehooks.com
• https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook
• https://blog.bitsrc.io/simple-code-reuse-with-react-hooks-432f390696bf

Publish

First, You need to have the rollup

$ npm install --global rollup

Then

• increment version in package.json
• push to gitlab
• run deploy:

$ yarn build
$ npm publish --access public

Contribution rules

Each hook must contain

• README.MD
• [hook].spec.js
• [hook].js file

then add to src/main.js

import [hook] from './[hook]/[hook].js

export {
    ...,
    [hook]
}

Name conventions

The name of the hook must always start with "use" so that it can be seen at first glance that it is subject to [Hook's rules] (https://reactjs.org/docs/hooks-rules.html).