Add examples

Author: Kevnz

readme.md

@@ -18,6 +18,7 @@ Useful React Hooks
 * [`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
@@ -281,6 +282,26 @@ export default () => {
 }
 ```
 
+## 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')
+  // <meta name="description" content="Brightleaf JS React Hooks">
+  setMetaValue('Awesome React Hooks from Brightleaf JS')
+  // <meta name="description" content="Awesome React Hooks from Brightleaf JS">
+  useMetaTag(
+    'og:title',
+    'Brightleaf JS React Hooks',
+    'property'
+  )
+  // <meta property="og:title" content="Brightleaf JS React Hooks">
+  return <div>The Page</div>
+}
+```
 # NES Hook
 
 Client hook for connecting to an [NES](https://github.com/hapijs/nes) instance

working/hooks/event-example.js

@@ -1,6 +1,12 @@
 import React, { useState } from 'react'
-import { useFavicon, useEventListener, useTitle } from '@brightleaf/react-hooks'
+import {
+  useFavicon,
+  useEventListener,
+  useTitle,
+  useCustomEvent,
+} from '@brightleaf/react-hooks'
 import Home from '../app/home'
+import Example from './samples/event.md'
 
 export default () => {
   useTitle('useEventListener example from @brightleaf/react-hooks')
@@ -9,7 +15,13 @@ export default () => {
   const onScroll = e => {
     setState(window.scrollY)
   }
+  const onBrightleafEvent = e => {
+    console.log('on brightleaf event', e)
+  }
   useEventListener('scroll', onScroll)
+  const fireEvent = useCustomEvent('brightleafEvent')
+  useEventListener('brightleafEvent', onBrightleafEvent)
+
   return (
     <div className="App content">
       <h2>Scroll the page</h2>
@@ -20,9 +32,17 @@ export default () => {
           left: 10,
           background: '#CCCCCC',
         }}
+        onClick={e => {
+          fireEvent({
+            payload: 'nothing',
+          })
+        }}
       >
         {state} scroll position
       </span>
+      <br />
+      <div className="content" dangerouslySetInnerHTML={{ __html: Example }} />
+      <br />
       <Home></Home>
     </div>
   )

working/hooks/online-status.js

@@ -1,13 +1,12 @@
 import React from 'react'
-import {
-  useOnlineStatus,
-  useTitle,
-  useMediaQuery,
-} from '@brightleaf/react-hooks'
+import { useOnlineStatus, useTitle, useMetaTag } from '@brightleaf/react-hooks'
 export default () => {
   useTitle('useOnlineStatus example from @brightleaf/react-hooks')
   const { offline, online } = useOnlineStatus()
-
+  useMetaTag(
+    'description',
+    'useOnlineStatus hook example from @brightleaf/react-hooks'
+  )
   return (
     <div className="App content">
       <h3>

working/hooks/samples/event.md

@@ -0,0 +1,42 @@
+## Event Hooks Example
+
+```jsx
+import React, { useState } from 'react'
+import { useEventListener, useTitle, useCustomEvent } from '@brightleaf/react-hooks'
+
+ export default () => {
+
+  const [state, setState] = useState(window.scrollY)
+  const onScroll = e => {
+    setState(window.scrollY)
+  }
+  const onBrightleafEvent = e => {
+    console.info('on brightleaf event', e)
+  }
+  useEventListener('scroll', onScroll)
+  const fireEvent = useCustomEvent('brightleafEvent')
+  useEventListener('brightleafEvent', onBrightleafEvent)
+
+  return (
+    <div className="App content">
+      <h2>Scroll the page</h2>
+      <span
+        style={{
+          position: 'fixed',
+          top: 10,
+          left: 10,
+          background: '#CCCCCC',
+        }}
+        onClick={e => {
+          fireEvent({
+            payload: 'nothing',
+          })
+        }}
+      >
+        {state} scroll position
+      </span>
+      <div>...page content</div>
+    </div>
+  )
+}
+```