Connection is offline
Useful react hooks
npm install @brightleaf/react-hooksUseful React Hooks
* useAsync - Hook to an async function
* useFetch - Hook to use Fetch
* useForm - Hook to make using forms super easy
* useGet - Hook to make a get request
* usePost - Hook to make an HTTP Post
* useClickOutside - Hook to handle a click outside an element
* useGraphQL - Hook to make a GraphQL request
* useKeypress - Hook to Keypress
* useKeypressed - Hook to fire a method when the keydown is triggered
* useNes - Hook to connect to Hapijs NES
* useWebSockets - Hook to interact with WebSockets
* useLocalStorage - Hook to local storage
* useCookie - Hook to Cookies
* useHover - Hook for binding to hover of an element
* useEventListener - Hook for binding to an hander to DOM event
* useFavicon - Hook to set a favicon
* useTitle - Hook to manipulate the page title
* useMetaTag - Hook to manipulate meta tags
* useScript - Hook to add JavaScript to the page
* useStyles - Hook to add CSS to the page
* useStyleSheet - Hook to add a css file to the page
* usePageVisibility - Hook to use the page visibility api
* useOnlineStatus - Hook to use the online status api
* useMediaQuery - Hook to return if the media query is matched
``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
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)
})}
>
)
}
`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) {,
{ 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 (
onSubmit={data => {
postData(data)
}}
>
)
}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 (
... // 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 instance
WebSocket Hook
#/examples/ws
$3
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) =>
key-${index}}>{m})
return (
Messages from Server
{messageList}
Status Messages
{connectMessage}
{connectedMessage}
)
}`$3
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) => (
key-${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
);
}
`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
);
}
`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(
) 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 (
);
}
`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
position: 'fixed',
top: 10,
left: 10,
background: '#CCCCCC',
}}
>
{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
)}
)
}
``