@walltowall/hooks
v0.8.3
Published
Collection of reusable React hooks providing an opinionated base for Wall-to-Wall Gatsby websites.
Downloads
26
Keywords
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/hooksHow 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) => ObjectReturns 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) => BooleanAllows 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/')
// => trueuseURLSearchParam
<T extends String | number>(key: String, defaultValue: T) => TAllows 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