@walltowall/hooks

Collection of reusable React hooks providing an opinionated base for Wall-to-Wall Gatsby websites.

Usage no npm install needed!

<script type="module">
  import walltowallHooks from 'https://cdn.skypack.dev/@walltowall/hooks';
</script>

README

@walltowall/hooks

Collection of reusable react hooks for Wall-to-Wall Gatsby websites.

Features

  • Re-usable stateful logic for functional React components.

Install

npm install --save @walltowall/hooks

How to use

// To import a hook,
import { hookName } from '@walltowall/hooks'

API

All functions and constants are exported from the root @walltowall/hooks package.

Hooks

useLocation

Returns the current window location from @reach/router.

Example
const location = useLocation()
// => 'careers'

useScrollDirection

(threshold: Number) => Object

Returns the current scroll direction with a customizeable threshold. A threshold is the minimum number of pixels that must be travelled before the scroll direction is considered to have changed.

Example
const scrollDirection = useScrollDirection(200)
// => { direction: 1, isScrollingDown: true, isScrollingUp: false }

useDynamicScript

(id: String, src: String, callback: Function) => Boolean

Allows for loading of external scripts at runtime. Returns a boolean indicating if the script has been loaded. The loaded script will be appended to the end of <body> with the provided id.

Can provide an optional callback that will get assigned to the <script> tag's onload attribute and called once the script is loaded.

Example
const isLoaded = useDynamicScript('stripe', 'https://js.stripe.com/v3/')
// => true

useURLSearchParam

<T extends String | number>(key: String, defaultValue: T) => T

Allows for syncing a component's local state value with a URL query parameter. Anytime the stateful value is updated, the URL parameter will be updated.

Unlike the useState hook, stateful values with useUrlSearchParam must be serializeable in a URL, so only strings or numbers are valid inputs.

Example
const [query, setQuery] = useURLSearchParam('hello', 'world')
// => http://localhost:3000/?hello=world