andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 20 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2019-08-25 05:55:26 +00:00
parent fd28615203
commit 0e624525e0
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
snippet_data/snippetList.json
View File

@ -497,6 +497,24 @@
"hash": "2a5dbbdb2da60c42a738211e43997f45fe416f4cb069fbb53b1369549f446319"
}
},
{
"id": "useSSR",
"type": "snippetListing",
"title": "useSSR",
"attributes": {
"text": "A hook that checks if the code is running on the browser or the server.\n\n- Create a custom hook that returns an appropriate object.\n- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser.\n- Use the `React.useState()` hook to define the `inBrowser` state variable.\n- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end.\n- Use the `React.useMemo()` to memoize the return values of the custom hook.\n\n",
"tags": [
"hooks",
"effect",
"state",
"memo",
"intermediate"
]
},
"meta": {
"hash": "907a0a4dabb96a5e7e418e475e0b17a5d400ce796df768589e08316d3b8a4e88"
}
},
{
"id": "useTimeout",
"type": "snippetListing",

24
snippet_data/snippets.json
View File

@ -677,6 +677,30 @@
"hash": "2a5dbbdb2da60c42a738211e43997f45fe416f4cb069fbb53b1369549f446319"
}
},
{
"id": "useSSR",
"title": "useSSR",
"type": "snippet",
"attributes": {
"fileName": "useSSR.md",
"text": "A hook that checks if the code is running on the browser or the server.\n\n- Create a custom hook that returns an appropriate object.\n- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser.\n- Use the `React.useState()` hook to define the `inBrowser` state variable.\n- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end.\n- Use the `React.useMemo()` to memoize the return values of the custom hook.\n\n",
"codeBlocks": {
"style": "",
"code": "const isDOMavailable = !!(\n typeof window !== 'undefined' &&\n window.document &&\n window.document.createElement\n);\n\nconst useSSR = (callback, delay) => {\n const [inBrowser, setInBrowser] = React.useState(isDOMavailable);\n\n React.useEffect(() => {\n setInBrowser(isDOMavailable);\n return () => {\n setInBrowser(false);\n }\n }, []);\n\n const useSSRObject = React.useMemo(() => ({\n isBrowser: inBrowser,\n isServer: !inBrowser,\n canUseWorkers: typeof Worker !== 'undefined',\n canUseEventListeners: inBrowser && !!window.addEventListener,\n canUseViewport: inBrowser && !!window.screen\n }), [inBrowser]);\n\n return React.useMemo(() => Object.assign(Object.values(useSSRObject), useSSRObject), [inBrowser]);\n};\n\nconst SSRChecker = props => {\n let { isBrowser, isServer } = useSSR();\n\n return <p>{ isBrowser ? 'Running on browser' : 'Running on server' }</p>;\n};",
"example": "const SSRChecker = props => {\n let { isBrowser, isServer } = useSSR();\n\n return <p>{ isBrowser ? 'Running on browser' : 'Running on server' }</p>;\n};\n\nReactDOM.render(<SSRChecker />, document.getElementById('root'));"
},
"tags": [
"hooks",
"effect",
"state",
"memo",
"intermediate"
]
},
"meta": {
"hash": "907a0a4dabb96a5e7e418e475e0b17a5d400ce796df768589e08316d3b8a4e88"
}
},
{
"id": "useTimeout",
"title": "useTimeout",