https://github.com/brightleaf/react-hooks
Custom react hooks
https://github.com/brightleaf/react-hooks
hooks javascript react
Last synced: about 1 year ago
JSON representation
Custom react hooks
- Host: GitHub
- URL: https://github.com/brightleaf/react-hooks
- Owner: brightleaf
- Created: 2019-05-07T21:20:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T18:05:57.000Z (over 3 years ago)
- Last Synced: 2025-04-18T23:59:35.372Z (about 1 year ago)
- Topics: hooks, javascript, react
- Language: JavaScript
- Homepage: https://brightleaf.dev/hooks/
- Size: 8.15 MB
- Stars: 22
- Watchers: 1
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Brightleaf React Hooks
Useful React Hooks
* [`useAsync`](#async-hook) - Hook to an async function
* [`useFetch`](#fetch-hook) - Hook to use Fetch
* [`useForm`](#form-hook) - Hook to make using forms super easy
* [`useGet`](#get-hook) - Hook to make a get request
* [`usePost`](#post-hook) - Hook to make an HTTP Post
* [`useClickOutside`](#click-outside-hook) - Hook to handle a click outside an element
* [`useGraphQL`](#graphql-hook) - Hook to make a GraphQL request
* [`useKeypress`](#keypress-hook) - Hook to Keypress
* [`useKeypressed`](#key-pressed-hook) - Hook to fire a method when the keydown is triggered
* [`useNes`](#/examples/nes) - Hook to connect to Hapijs NES
* [`useWebSockets`](#/examples/ws) - Hook to interact with WebSockets
* [`useLocalStorage`](#local-storage-hook) - Hook to local storage
* [`useCookie`](#cookie-hook) - Hook to Cookies
* [`useHover`](#hover-hook) - Hook for binding to hover of an element
* [`useEventListener`](#event-hook) - Hook for binding to an hander to DOM event
* [`useFavicon`](#favicon-hook) - Hook to set a favicon
* [`useTitle`](#title-hook) - Hook to manipulate the page title
* [`useMetaTag`](#meta-tag-hook) - Hook to manipulate meta tags
* [`useScript`](#script-hook) - Hook to add JavaScript to the page
* [`useStyles`](#style-hook) - Hook to add CSS to the page
* [`useStyleSheet`](#stylesheet-hook) - Hook to add a css file to the page
* [`usePageVisibility`](#pagevisibility-hook) - Hook to use the page visibility api
* [`useOnlineStatus`](#onlinestatus-hook) - Hook to use the online status api
* [`useMediaQuery`](#media-query-hook) - Hook to return if the media query is matched
[Examples](https://brightleaf.dev/hooks/examples/#/)
## Async Hook
```jsx
import React, { useEffect } from 'react'
import { useAsync } from '@brightleaf/react-hooks'
export default () => {
const { loading, error, data, execute } = useAsync(asyncFunction)
useEffect(() => {
execute()
}, [])
if (loading) {
return
Executing Async Function
}
if (error) {
return Error executing async function
}
return {data}
}
```
## Fetch Hook
```javascript
import React, { useState } from 'react'
import { useFetch } from '@brightleaf/react-hooks'
export default () => {
const [id, setId] = useState(1)
const { data, error, loading } = useFetch(
`https://swapiql.herokuapp.com/api/characters/${id}`
)
if (error) {
return (
Error Getting Data
)
}
if (loading) {
return (
Loading Data
)
}
return (
{data[0].name}
)
}
```
## Form Hook
```javascript
import React, { useState } from 'react'
import { useForm } from '@brightleaf/react-hooks'
export default () => {
const { addToForm, onSubmit } = useFetch()
return (
{
console.info('onsubmit handler', data)
})}
>
Form Hook
First
Second
Third
Second First
Second Second
Second Third
The Radio
First
Second
Submit
)
}
```
## GraphQL Hook
```javascript
import React, { useState } from 'react'
import { useGraphQL } from '@brightleaf/react-hooks'
export default () => {
const [id, setId] = useState(1)
const { data, loading, error } = useGraphQL(
'https://swapiql.herokuapp.com/graphql',
`query Person($id: ID) {
person(id: $id) {
id,
name
}
}`,
{ id }
)
if (loading) {
return
Loading Data
}
if (error) {
return Error getting graphql data
}
return {data.person[0].name}
}
```
## Keypress Hook
```jsx
import React from 'react'
import { useKeypress } from '@brightleaf/react-hooks'
export default () => {
const aKeyDown = useKeypress('a')
return (
Key Press?
{aKeyDown && (
Yes, the {'"a"'} key is pressed
)}
{!keyDown && No the {'"a"'} key is not currently pressed}
)
}
```
## Key Pressed Hook
```jsx
import React, { useState } from 'react'
import { useKeypressed } from '@brightleaf/react-hooks'
export default () => {
const keyPressed = useKeypressed('a')
return (
Key Press?
{keyPressed && (
Yes, the {'"a"'} key has been pressed
)}
{!keyPressed && No the {'"a"'} key is not been pressed yet}
)
}
```
## Post Hook
```javascript
import React from 'react'
import { Button, Form, TextBox } from 'react-form-elements'
import { usePost } from '@brightleaf/react-hooks'
export default () => {
const { data, error, loading, postData } = usePost(
`https://kev-pi.herokuapp.com/api/echo`
)
if (loading) {
return
Loading Data
}
if (error) {
return Error getting graphql data
}
return (
{
postData(data)
}}
>
Send
)
}
```
## Get Hook
```javascript
import React, { useState } from 'react'
import { useGet } from '@brightleaf/react-hooks'
export default () => {
const [id, setId] = useState(1)
const { data, error, loading, getUrl } = useGet(
`https://swapiql.herokuapp.com/api/characters/${id}`
)
if (error) {
return (
Error Getting Data
)
}
if (loading) {
return (
Loading Data
)
}
return (
{data[0].name}
Pick a number
{
getUrl('https://swapiql.herokuapp.com/api/characters/2')
}}
>
2
)
}
```
## Click Outside Hook
```javascript
import React, { useState, useRef } from 'react'
import { useClickOutside } from '@brightleaf/react-hooks'
export default () => {
const [menu, setMenu] = useState(false)
const navMenu= useRef()
const hideDropDown = () => {
setMenu(false)
}
useClickOutside(navMenu, hideDropDowns, menu)
return (
{
setMenu(!menu)
}}
>
Menu
...// items
... // rest of page
)
}
```
## Title Hook
```jsx
import React, { useEffect } from 'react'
import { useTitle } from '@brightleaf/react-hooks'
export default () => {
useTitle('Brightleaf JS Hooks')
return
The Page
}
```
## Meta Tag Hook
```jsx
import React, { useEffect } from 'react'
import { useMetaTag } from '@brightleaf/react-hooks'
export default () => {
const [metaValue, setMetaValue] = useMetaTag('description', 'Brightleaf JS React Hooks')
//
setMetaValue('Awesome React Hooks from Brightleaf JS')
//
useMetaTag(
'og:title',
'Brightleaf JS React Hooks',
'property'
)
//
return
The Page
}
```
# NES Hook
Client hook for connecting to an [NES](https://github.com/hapijs/nes) instance
# WebSocket Hook
#/examples/ws
### Messages
```javascript
import React from 'react'
import { useNes } from '@brightleaf/react-hooks'
export default () => {
const { messages, error, connecting, connected } = useNes(
'wss://kev-pi.herokuapp.com'
)
if (error) {
return
Error
}
const connectMessage = connecting ? Connecting : Not Connecting
const connectedMessage = connected ? Connected : Not Connected
const messageList = messages.map((m, index) =>
{m})
return (
Messages from Server
{messageList}
Status Messages
{connectMessage}
{connectedMessage}
)
}
```
### Subscriptions
Use the client from the hook to create a real time chat room
```javascript
import React, { useState} from 'react'
import { useNes } from '@brightleaf/react-hooks'
export default () => {
const { client } = useNes('wss://kev-pi.herokuapp.com')
const [messages, setMessages] = useState([{
body: 'welcome',
user: 'system'
}])
const addMessage = (msg) => {
messages.push(msg)
setMessages([...messages])
}
const handler = function(update, flags) {
addMessage(update)
}
// subscribe to a channel
client.subscribe('/rooms/general', handler);
const messageList = messages.map(({user, body}, index) => (
{user}:{body}))
return (
{messageList}
)
}
```
## Local Storage Hook
```javascript
import React, { useRef } from 'react'
import { useLocalStorage } from '@brightleaf/react-hooks'
export default () => {
const [count, setCount] = useLocalStorage('count', 0);
return (
You clicked {count} times
setCount(count + 1)}>
Click me
);
}
```
## Cookie Hook
```javascript
import React, { useRef } from 'react'
import { useCookie } from '@brightleaf/react-hooks'
export default () => {
const [count, setCount] = useCookie('count', 0);
const [longCount, setLongCount] = useCookie('count', 0, { expires: 21 });
return (
You clicked {count} times
setCount(count + 1)}>
Click me
);
}
```
## Hover Hook
```javascript
import React, { useRef } from 'react'
import { useHover } from '@brightleaf/react-hooks'
export default () => {
const elRef = useRef(null);
const hovered = useHover(elRef);
return (
Hover Over Me
);
}
```
## Style Hook
```javascript
import React from 'react'
import { useStyles } from '@brightleaf/react-hooks'
export default () => {
useStyles(`
html,
body {
font-family: 'Open Sans';
}
div {
padding: 5px;
border: 1px solid #ccc;
}
`)
return (
Something
);
}
```
## StyleSheet Hook
```javascript
import React from 'react'
import { useStyleSheet } from '@brightleaf/react-hooks'
export default () => {
useStyleSheet(
'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
)
useStyleSheet('https://fonts.googleapis.com/css?family=Open+Sans')
return (
...
);
}
```
## Script Hook
```javascript
import React from 'react'
import { useScript } from '@brightleaf/react-hooks'
export default () => {
useScript('/js/script.js')
return (
...
);
}
```
## PageVisibility Hook
```javascript
import React from 'react'
import { usePageVisibility } from '@brightleaf/react-hooks'
export default () => {
const { visible, hidden } = usePageVisibility()
return (
...
);
}
```
## Favicon Hook
```javascript
import React from 'react'
import { useFavicon } from '@brightleaf/react-hooks'
export default () => {
const { favicon, setFavicon } = useFavicon('brightleaf.png')
return (
{
e.preventDefault()
setFavicon('brightleaf-1.png')
}}>Change Favicon
);
}
```
## OnlineStatus Hook
```javascript
import React from 'react'
import { useOnlineStatus } from '@brightleaf/react-hooks'
export default () => {
const { offline, online } = useOnlineStatus()
return (
{offline && 'Connection is offline'}
{online && 'Connection is online'}
{offline && (
Connection is offline
)}
{online && (
Connection is online
)}
)
}
```
## Event Hook
```javascript
import React , { useState } from 'react'
import { useEventListener } from '@brightleaf/react-hooks'
export default () => {
const [state, setState] = useState(window.scrollY)
const onScroll = e => {
setState(window.scrollY)
}
useEventListener('scroll', onScroll)
return (
Scroll the page
{state} scroll position
)
}
```
## Media Query Hook
```javascript
import React , { useState } from 'react'
import { useMediaQuery } from '@brightleaf/react-hooks'
export default () => {
const { matches } = useMediaQuery('(min-width: 500px)')
return (
{matches && (
The page is at least 500px
)}
)
}
```