{"id":19082366,"url":"https://github.com/brightleaf/react-hooks","last_synced_at":"2025-04-30T08:24:15.848Z","repository":{"id":34881606,"uuid":"185479695","full_name":"brightleaf/react-hooks","owner":"brightleaf","description":"Custom react hooks","archived":false,"fork":false,"pushed_at":"2023-03-03T18:05:57.000Z","size":8547,"stargazers_count":22,"open_issues_count":28,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T23:59:35.372Z","etag":null,"topics":["hooks","javascript","react"],"latest_commit_sha":null,"homepage":"https://brightleaf.dev/hooks/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brightleaf.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-07T21:20:14.000Z","updated_at":"2023-01-05T19:31:36.000Z","dependencies_parsed_at":"2024-06-19T02:07:20.561Z","dependency_job_id":null,"html_url":"https://github.com/brightleaf/react-hooks","commit_stats":{"total_commits":232,"total_committers":1,"mean_commits":232.0,"dds":0.0,"last_synced_commit":"34c6f4ca76a411d7387ccdc55abdaf9d399b2d9f"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brightleaf%2Freact-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brightleaf%2Freact-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brightleaf%2Freact-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brightleaf%2Freact-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brightleaf","download_url":"https://codeload.github.com/brightleaf/react-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251667353,"owners_count":21624476,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","javascript","react"],"created_at":"2024-11-09T02:43:04.070Z","updated_at":"2025-04-30T08:24:15.798Z","avatar_url":"https://github.com/brightleaf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brightleaf React Hooks\n\nUseful React Hooks\n\n* [`useAsync`](#async-hook) - Hook to an async function\n* [`useFetch`](#fetch-hook) - Hook to use Fetch\n* [`useForm`](#form-hook) - Hook to make using forms super easy\n* [`useGet`](#get-hook) - Hook to make a get request\n* [`usePost`](#post-hook) - Hook to make an HTTP Post\n* [`useClickOutside`](#click-outside-hook) - Hook to handle a click outside an element\n* [`useGraphQL`](#graphql-hook) - Hook to make a GraphQL request\n* [`useKeypress`](#keypress-hook) - Hook to Keypress\n* [`useKeypressed`](#key-pressed-hook) - Hook to fire a method when the keydown is triggered\n* [`useNes`](#/examples/nes) - Hook to connect to Hapijs NES\n* [`useWebSockets`](#/examples/ws) - Hook to interact with WebSockets\n* [`useLocalStorage`](#local-storage-hook) - Hook to local storage\n* [`useCookie`](#cookie-hook) - Hook to Cookies\n* [`useHover`](#hover-hook) - Hook for binding to hover of an element\n* [`useEventListener`](#event-hook) - Hook for binding to an hander to DOM event\n* [`useFavicon`](#favicon-hook) - Hook to set a favicon\n* [`useTitle`](#title-hook) - Hook to manipulate the page title\n* [`useMetaTag`](#meta-tag-hook) - Hook to manipulate meta tags\n* [`useScript`](#script-hook) - Hook to add JavaScript to the page\n* [`useStyles`](#style-hook) - Hook to add CSS to the page\n* [`useStyleSheet`](#stylesheet-hook) - Hook to add a css file to the page\n* [`usePageVisibility`](#pagevisibility-hook) - Hook to use the page visibility api\n* [`useOnlineStatus`](#onlinestatus-hook) - Hook to use the online status api\n* [`useMediaQuery`](#media-query-hook) - Hook to return if the media query is matched\n\n[Examples](https://brightleaf.dev/hooks/examples/#/)\n\n## Async Hook\n\n```jsx\nimport React, { useEffect } from 'react'\nimport { useAsync } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const { loading, error, data, execute } = useAsync(asyncFunction)\n  useEffect(() =\u003e {\n    execute()\n  }, [])\n  if (loading) {\n    return \u003cdiv\u003eExecuting Async Function\u003c/div\u003e\n  }\n  if (error) {\n    return \u003cdiv\u003eError executing async function\u003c/div\u003e\n  }\n  return \u003cdiv\u003e{data}\u003c/div\u003e\n}\n```\n\n## Fetch Hook\n\n```javascript\nimport React, { useState } from 'react'\nimport { useFetch } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n  const [id, setId] = useState(1)\n\n  const { data, error, loading } = useFetch(\n    `https://swapiql.herokuapp.com/api/characters/${id}`\n  )\n  if (error) {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003ch1\u003eError Getting Data\u003c/h1\u003e\n      \u003c/div\u003e\n    )\n  }\n  if (loading) {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003ch1\u003eLoading Data\u003c/h1\u003e\n      \u003c/div\u003e\n    )\n  }\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003e{data[0].name}\u003c/h1\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Form Hook\n\n```javascript\nimport React, { useState } from 'react'\nimport { useForm } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n  const { addToForm, onSubmit } = useFetch()\n \n  return (\n    \u003cform\n        onSubmit={onSubmit(data =\u003e {\n          console.info('onsubmit handler', data)\n        })}\n      \u003e\n        \u003cfieldset\u003e\n          \u003clegend\u003eForm Hook\u003c/legend\u003e\n          \u003cinput\n            name=\"firstName\"\n            type=\"text\"\n            ref={addToForm}\n            defaultValue=\"Brightleaf\"\n          /\u003e\n          \u003cinput\n            name=\"lastName\"\n            type=\"text\"\n            ref={addToForm}\n            defaultValue=\"Hooks\"\n          /\u003e\n          \u003cbr /\u003e\n          \u003cselect ref={addToForm} name=\"dropdown\" defaultValue=\"13\"\u003e\n            \u003coptgroup label=\"First Group\"\u003e\n              \u003coption value=\"1\"\u003eFirst\u003c/option\u003e\n              \u003coption value=\"2\"\u003eSecond\u003c/option\u003e\n              \u003coption value=\"3\"\u003eThird\u003c/option\u003e\n            \u003c/optgroup\u003e\n            \u003coptgroup label=\"Second Group\"\u003e\n              \u003coption value=\"11\"\u003eSecond First\u003c/option\u003e\n              \u003coption value=\"12\"\u003eSecond Second\u003c/option\u003e\n              \u003coption value=\"13\"\u003eSecond Third\u003c/option\u003e\n            \u003c/optgroup\u003e\n          \u003c/select\u003e\n          \u003cbr /\u003e\n          \u003cinput type=\"checkbox\" name=\"check\" defaultChecked ref={addToForm} /\u003e\n          \u003cbr /\u003e\n          \u003cdiv\u003e\n            \u003clabel\u003eThe Radio\u003c/label\u003e\n            \u003cdiv\u003e\n              \u003clabel\u003e First \u003c/label\u003e\n              \u003cinput name=\"rgroup\" type=\"radio\" value=\"first\" ref={addToForm} /\u003e\n            \u003c/div\u003e\n            \u003cdiv\u003e\n              \u003clabel\u003e Second \u003c/label\u003e\n              \u003cinput\n                name=\"rgroup\"\n                type=\"radio\"\n                value=\"second\"\n                ref={addToForm}\n              /\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cbr /\u003e\n          \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n        \u003c/fieldset\u003e\n      \u003c/form\u003e\n  )\n}\n```\n\n## GraphQL Hook\n\n```javascript\nimport React, { useState } from 'react'\nimport { useGraphQL } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const [id, setId] = useState(1)\n  const { data, loading, error } = useGraphQL(\n    'https://swapiql.herokuapp.com/graphql',\n    `query Person($id: ID) {\n      person(id: $id) {\n        id,\n        name\n      }\n    }`,\n    { id }\n  )\n  if (loading) {\n    return \u003cdiv\u003eLoading Data\u003c/div\u003e\n  }\n  if (error) {\n    return \u003cdiv\u003eError getting graphql data\u003c/div\u003e\n  }\n  return \u003cdiv\u003e{data.person[0].name}\u003c/div\u003e\n}\n```\n\n## Keypress Hook\n\n```jsx\nimport React from 'react'\nimport { useKeypress } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n  const aKeyDown = useKeypress('a')\n  return (\n    \u003cdiv className=\"App content\"\u003e\n      \u003ch2\u003eKey Press?\u003c/h2\u003e\n      {aKeyDown \u0026\u0026 (\n        \u003cdiv\u003e\n          Yes, the \u003cb\u003e{'\"a\"'}\u003c/b\u003e key is pressed\n        \u003c/div\u003e\n      )}\n      {!keyDown \u0026\u0026 \u003cdiv\u003eNo the \u003cb\u003e{'\"a\"'}\u003c/b\u003e key is not currently pressed\u003c/div\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n## Key Pressed Hook\n\n```jsx\nimport React, { useState } from 'react'\nimport { useKeypressed } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n\n  const keyPressed = useKeypressed('a')\n\n  return (\n    \u003cdiv className=\"App content\"\u003e\n      \u003ch2\u003eKey Press?\u003c/h2\u003e\n      {keyPressed \u0026\u0026 (\n        \u003cdiv\u003e\n          Yes, the \u003cb\u003e{'\"a\"'}\u003c/b\u003e key has been pressed\n        \u003c/div\u003e\n      )}\n      {!keyPressed \u0026\u0026 \u003cdiv\u003eNo the \u003cb\u003e{'\"a\"'}\u003c/b\u003e key is not been pressed yet\u003c/div\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n\n## Post Hook\n\n```javascript\nimport React from 'react'\nimport { Button, Form, TextBox } from 'react-form-elements'\nimport { usePost } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const { data, error, loading, postData } = usePost(\n    `https://kev-pi.herokuapp.com/api/echo`\n  )\n\n  if (loading) {\n    return \u003cdiv\u003eLoading Data\u003c/div\u003e\n  }\n  if (error) {\n    return \u003cdiv\u003eError getting graphql data\u003c/div\u003e\n  }\n  return (\n    \u003cForm\n      name=\"testForm\"\n      onSubmit={data =\u003e {\n        postData(data)\n      }}\n    \u003e\n      \u003cTextBox label=\"My Label\" name=\"myTextBox\" /\u003e\n      \u003cButton\u003eSend\u003c/Button\u003e\n    \u003c/Form\u003e\n  )\n}\n\n```\n\n## Get Hook\n\n```javascript\nimport React, { useState } from 'react'\nimport { useGet } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n  const [id, setId] = useState(1)\n\n  const { data, error, loading, getUrl } = useGet(\n    `https://swapiql.herokuapp.com/api/characters/${id}`\n  )\n  if (error) {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003ch1\u003eError Getting Data\u003c/h1\u003e\n      \u003c/div\u003e\n    )\n  }\n  if (loading) {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003ch1\u003eLoading Data\u003c/h1\u003e\n      \u003c/div\u003e\n    )\n  }\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003e{data[0].name}\u003c/h1\u003e\n      \u003ch2\u003ePick a number\u003c/h2\u003e\n      \u003cdiv className=\"select\"\u003e\n        \u003cdiv\n          onClick={e =\u003e {\n            getUrl('https://swapiql.herokuapp.com/api/characters/2')\n          }}\n        \u003e\n          2\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Click Outside Hook\n\n```javascript\nimport React, { useState, useRef } from 'react'\nimport { useClickOutside } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const [menu, setMenu] = useState(false)\n  const navMenu= useRef()\n  const hideDropDown = () =\u003e {\n    setMenu(false)\n  }\n  useClickOutside(navMenu, hideDropDowns, menu)\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cnav ref={navMenu}\u003e\n        \u003cdiv className={`dropdown ${menu ? 'active' : ' '}`}\u003e\n          \u003cbutton\n            type=\"button\"\n            className=\"dropdown-trigger\"\n            onClick={e =\u003e {\n              setMenu(!menu)\n            }}\n          \u003e\n            Menu\n          \u003c/button\u003e\n          \u003cdiv\u003e\n            ...// items\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/nav\u003e\n      ... // rest of page\n    \u003c/div\u003e\n  )\n}\n```\n\n## Title Hook\n\n```jsx\nimport React, { useEffect } from 'react'\nimport { useTitle } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  useTitle('Brightleaf JS Hooks')\n\n  return \u003cdiv\u003eThe Page\u003c/div\u003e\n}\n```\n\n## Meta Tag Hook\n\n```jsx\nimport React, { useEffect } from 'react'\nimport { useMetaTag } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const [metaValue, setMetaValue] = useMetaTag('description', 'Brightleaf JS React Hooks')\n  // \u003cmeta name=\"description\" content=\"Brightleaf JS React Hooks\"\u003e\n  setMetaValue('Awesome React Hooks from Brightleaf JS')\n  // \u003cmeta name=\"description\" content=\"Awesome React Hooks from Brightleaf JS\"\u003e\n  useMetaTag(\n    'og:title',\n    'Brightleaf JS React Hooks',\n    'property'\n  )\n  // \u003cmeta property=\"og:title\" content=\"Brightleaf JS React Hooks\"\u003e\n  return \u003cdiv\u003eThe Page\u003c/div\u003e\n}\n```\n# NES Hook\n\nClient hook for connecting to an [NES](https://github.com/hapijs/nes) instance\n\n# WebSocket Hook\n\n#/examples/ws\n\n\n### Messages\n\n```javascript\nimport React from 'react'\nimport { useNes } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n\n  const { messages, error, connecting, connected } = useNes(\n    'wss://kev-pi.herokuapp.com'\n  )\n\n  if (error) {\n    return \u003cdiv\u003e\u003ch1\u003eError\u003c/h1\u003e\u003c/div\u003e\n  }\n  const connectMessage = connecting ? \u003cdiv\u003eConnecting\u003c/div\u003e : \u003cdiv\u003eNot Connecting\u003c/div\u003e\n  const connectedMessage = connected ? \u003cdiv\u003eConnected\u003c/div\u003e : \u003cdiv\u003eNot Connected\u003c/div\u003e\n\n  const messageList = messages.map((m, index) =\u003e \u003cdiv key={`key-${index}`}\u003e{m}\u003c/div\u003e)\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003ch1\u003eMessages from Server\u003c/h1\u003e\n      \u003cdiv\u003e{messageList}\u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cb\u003eStatus Messages\u003c/b\u003e\n        {connectMessage}\n        {connectedMessage}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\n### Subscriptions\n\nUse the client from the hook to create a real time chat room\n\n```javascript\nimport React, { useState}  from 'react'\nimport { useNes } from '@brightleaf/react-hooks'\nexport default () =\u003e {\n  const { client } = useNes('wss://kev-pi.herokuapp.com')\n  const [messages, setMessages] = useState([{\n    body: 'welcome',\n    user: 'system'\n  }])\n  const addMessage = (msg) =\u003e  {\n    messages.push(msg)\n    setMessages([...messages])\n  }\n  const handler = function(update, flags) {\n    addMessage(update)\n  }\n  // subscribe to a channel\n  client.subscribe('/rooms/general', handler);\n\n  const messageList = messages.map(({user, body}, index) =\u003e (\u003cdiv key={`key-${index}`}\u003e\u003cb\u003e{user}:\u003c/b\u003e{body}\u003c/div\u003e))\n  return (\n    \u003cdiv\u003e\n      {messageList}\n    \u003c/div\u003e\n  )\n}\n```\n\n## Local Storage Hook\n\n```javascript\nimport React, { useRef } from 'react'\nimport { useLocalStorage } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const [count, setCount] = useLocalStorage('count', 0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eYou clicked {count} times\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        Click me\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Cookie Hook\n\n```javascript\nimport React, { useRef } from 'react'\nimport { useCookie } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const [count, setCount] = useCookie('count', 0);\n  const [longCount, setLongCount] = useCookie('count', 0, { expires: 21 });\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eYou clicked {count} times\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        Click me\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Hover Hook\n\n```javascript\nimport React, { useRef } from 'react'\nimport { useHover } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const elRef = useRef(null);\n  const hovered = useHover(elRef);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv className={ hovered ? 'animated' : 'static' }\u003e\n        Hover Over Me\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Style Hook\n\n```javascript\nimport React from 'react'\nimport { useStyles } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n   useStyles(`\n    html,\n    body {\n        font-family: 'Open Sans';\n    }\n    div {\n        padding: 5px;\n        border: 1px solid #ccc;\n    }\n  `)\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        Something\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## StyleSheet Hook\n\n```javascript\nimport React from 'react'\nimport { useStyleSheet } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  useStyleSheet(\n    'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'\n  )\n  useStyleSheet('https://fonts.googleapis.com/css?family=Open+Sans')\n\n  return (\n    \u003cdiv\u003e\n      ...\n    \u003c/div\u003e\n  );\n}\n```\n\n## Script Hook\n\n```javascript\nimport React from 'react'\nimport { useScript } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  useScript('/js/script.js')\n\n  return (\n    \u003cdiv\u003e\n      ...\n    \u003c/div\u003e\n  );\n}\n```\n## PageVisibility Hook\n\n```javascript\nimport React from 'react'\nimport { usePageVisibility } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const { visible, hidden } = usePageVisibility()\n\n  return (\n    \u003cdiv\u003e\n      ...\n    \u003c/div\u003e\n  );\n}\n```\n\n## Favicon Hook\n\n```javascript\nimport React from 'react'\nimport { useFavicon } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n\n  const { favicon, setFavicon } = useFavicon('brightleaf.png')\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={e =\u003e {\n        e.preventDefault()\n        setFavicon('brightleaf-1.png')\n      }}\u003eChange Favicon\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## OnlineStatus Hook\n\n```javascript\nimport React from 'react'\nimport { useOnlineStatus } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const { offline, online } = useOnlineStatus()\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003e\n        {offline \u0026\u0026 'Connection is offline'}\n        {online \u0026\u0026 'Connection is online'}\n      \u003c/h3\u003e\n      {offline \u0026\u0026 (\n        \u003carticle className=\"message is-danger\"\u003e\n          \u003cdiv className=\"message-body\"\u003eConnection is offline \u003c/div\u003e\n        \u003c/article\u003e\n      )}\n      {online \u0026\u0026 (\n        \u003carticle className=\"message is-success\"\u003e\n          \u003cdiv className=\"message-body\"\u003eConnection is online \u003c/div\u003e\n        \u003c/article\u003e\n      )}\n    \u003c/div\u003e\n  )\n}\n```\n\n## Event Hook\n\n```javascript\nimport React , { useState } from 'react'\nimport { useEventListener } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n  const [state, setState] = useState(window.scrollY)\n  const onScroll = e =\u003e {\n    setState(window.scrollY)\n  }\n  useEventListener('scroll', onScroll)\n  return (\n    \u003cdiv className=\"App content\"\u003e\n      \u003ch2\u003eScroll the page\u003c/h2\u003e\n      \u003cspan\n        style={{\n          position: 'fixed',\n          top: 10,\n          left: 10,\n          background: '#CCCCCC',\n        }}\n      \u003e\n        {state} scroll position\n      \u003c/span\u003e\n      \u003cHome\u003e\u003c/Home\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Media Query Hook\n\n```javascript\nimport React , { useState } from 'react'\nimport { useMediaQuery } from '@brightleaf/react-hooks'\n\nexport default () =\u003e {\n\n  const { matches } = useMediaQuery('(min-width: 500px)')\n  return (\n    \u003cdiv className=\"App content\"\u003e\n      {matches \u0026\u0026 (\n        \u003carticle className=\"message is-warning\"\u003e\n          \u003cdiv className=\"message-body\"\u003eThe page is at least 500px\u003c/div\u003e\n        \u003c/article\u003e\n      )}\n    \u003c/div\u003e\n  )\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrightleaf%2Freact-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrightleaf%2Freact-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrightleaf%2Freact-hooks/lists"}