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

Travis build: 54

Browse Source
This commit is contained in:
30secondsofcode
2019-09-11 06:18:47 +00:00
parent b8e2e466d7
commit 33d1578b97
3 changed files with 96 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

@ -60,6 +60,7 @@ import ReactDOM from 'react-dom';
* [`useClickOutside`](#useclickoutside)
* [`useFetch`](#usefetch)
* [`useInterval`](#useinterval)
* [`useNavigatorOnLine`](#usenavigatoronline)
* [`useSSR`](#usessr)
* [`useTimeout`](#usetimeout)
@ -462,6 +463,57 @@ ReactDOM.render(<Timer />, document.getElementById('root'));
<br>[⬆ Back to top](#contents)
### useNavigatorOnLine
A hook that returns if the client is online or offline.
- Create a function, `getOnLineStatus`, that uses the `NavigatorOnLine` web API to get the online status of the client.
- Use the `React.useState()` hook to create an appropriate state variable, `status`, and setter.
- Use the `React.useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.
- Finally return the `status` state variable.
```jsx
const getOnLineStatus = () =>
typeof navigator !== "undefined" && typeof navigator.onLine === "boolean"
? navigator.onLine
: true;
const useNavigatorOnLine = () => {
const [status, setStatus] = React.useState(getOnLineStatus());
const setOnline = () => setStatus(true);
const setOffline = () => setStatus(false);
React.useEffect(() => {
window.addEventListener("online", setOnline);
window.addEventListener("offline", setOffline);
return () => {
window.removeEventListener("online", setOnline);
window.removeEventListener("offline", setOffline);
};
}, []);
return status;
};
```
<details>
<summary>Examples</summary>
```jsx
const StatusIndicator = () => {
const isOnline = useNavigatorOnLine();
return <span>You are {isOnline ? "online" : "offline"}.</span>;
};
ReactDOM.render(<StatusIndicator />, document.getElementById("root"));
```
</details>
<br>[⬆ Back to top](#contents)
### useSSR
A hook that checks if the code is running on the browser or the server.
@ -1632,8 +1684,6 @@ ReactDOM.render(<App />, document.getElementById('root'));
### RippleButton
### RippleButton
Renders a button that animates a ripple effect when clicked.
- Define some appropriate CSS styles and an animation for the ripple effect.

21
snippet_data/snippetList.json
View File

@ -273,7 +273,7 @@
"type": "snippetListing",
"title": "RippleButton",
"attributes": {
"text": "### RippleButton\n\nRenders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
"text": "Renders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
"tags": [
"visual",
"state",
@ -282,7 +282,7 @@
]
},
"meta": {
"hash": "95d8e2f6113d2d38c90c3f6d0f765cc48cbc85a14cc77613b0c9b09156684116"
"hash": "a2238ea3abedb5a38d836a57966006cc43f905b375836d138bd69671a8731d84"
}
},
{
@ -514,6 +514,23 @@
"hash": "2146f00ffd55bd78f63e0543922b73cdc339acf728067bf96f20c05eca5306ab"
}
},
{
"id": "useNavigatorOnLine",
"type": "snippetListing",
"title": "useNavigatorOnLine",
"attributes": {
"text": "A hook that returns if the client is online or offline.\n\n- Create a function, `getOnLineStatus`, that uses the `NavigatorOnLine` web API to get the online status of the client.\n- Use the `React.useState()` hook to create an appropriate state variable, `status`, and setter.\n- Use the `React.useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.\n- Finally return the `status` state variable.\n\n",
"tags": [
"hooks",
"state",
"effect",
"intermediate"
]
},
"meta": {
"hash": "c9a0c97f92439438fd49c5ef50742524aae8a162e144342956bcf92cf1ebf470"
}
},
{
"id": "useSSR",
"type": "snippetListing",

27
snippet_data/snippets.json
View File

@ -370,7 +370,7 @@
"type": "snippet",
"attributes": {
"fileName": "RippleButton.md",
"text": "### RippleButton\n\nRenders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
"text": "Renders a button that animates a ripple effect when clicked.\n\n- Define some appropriate CSS styles and an animation for the ripple effect.\n- Use the `React.useState()` hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.\n- Use the `React.useEffect()` hook to change the state every time the `coords` state variable changes, starting the animation.\n- Use `setTimeout()` in the previous hook to clear the animation after it's done playing.\n- Use the `React.useEffect()` hook a second time to reset `coords` whenever the `isRippling` state variable is `false.`\n- Handle the `onClick` event by updating the `coords` state variable and calling the passed callback.\n- Finally, render a `<button>` with one or two `<span>` elements, setting the position of the `.ripple` element based on the `coords` state variable.\n\n",
"codeBlocks": {
"style": ".ripple-button {\n border-radius: 4px;\n border: none;\n margin: 8px;\n padding: 14px 24px;\n background: #1976d2;\n color: #fff;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n}\n\n.ripple-button > .ripple {\n width: 20px;\n height: 20px;\n position: absolute;\n background: #63a4ff;\n display: block;\n content: \"\";\n border-radius: 9999px;\n opacity: 1;\n animation: 1.2s ease 1 forwards ripple-effect;\n}\n\n@keyframes ripple-effect {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(10);\n opacity: 0.375;\n }\n 100% {\n transform: scale(35);\n opacity: 0;\n }\n}\n\n.ripple-button > .content {\n position: relative;\n z-index: 2;\n}",
"code": "function RippleButton({ children, onClick }) {\n const [coords, setCoords] = React.useState({ x: -1, y: -1 });\n const [isRippling, setIsRippling] = React.useState(false);\n\n React.useEffect(\n () => {\n if (coords.x !== -1 && coords.y !== -1) {\n setIsRippling(true);\n setTimeout(() => setIsRippling(false), 1200);\n } else setIsRippling(false);\n },\n [coords]\n );\n\n React.useEffect(\n () => {\n if (!isRippling) setCoords({ x: -1, y: -1 });\n },\n [isRippling]\n );\n\n return (\n <button\n className=\"ripple-button\"\n onClick={e => {\n var rect = e.target.getBoundingClientRect();\n var x = e.clientX - rect.left;\n var y = e.clientY - rect.top;\n setCoords({ x, y });\n onClick && onClick(e);\n }}\n >\n {isRippling ? (\n <span\n className=\"ripple\"\n style={{\n left: coords.x + 10,\n top: coords.y\n }}\n />\n ) : (\n \"\"\n )}\n <span className=\"content\">{children}</span>\n </button>\n );\n}",
@ -384,7 +384,7 @@
]
},
"meta": {
"hash": "95d8e2f6113d2d38c90c3f6d0f765cc48cbc85a14cc77613b0c9b09156684116"
"hash": "a2238ea3abedb5a38d836a57966006cc43f905b375836d138bd69671a8731d84"
}
},
{
@ -700,6 +700,29 @@
"hash": "2146f00ffd55bd78f63e0543922b73cdc339acf728067bf96f20c05eca5306ab"
}
},
{
"id": "useNavigatorOnLine",
"title": "useNavigatorOnLine",
"type": "snippet",
"attributes": {
"fileName": "useNavigatorOnLine.md",
"text": "A hook that returns if the client is online or offline.\n\n- Create a function, `getOnLineStatus`, that uses the `NavigatorOnLine` web API to get the online status of the client.\n- Use the `React.useState()` hook to create an appropriate state variable, `status`, and setter.\n- Use the `React.useEffect()` hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.\n- Finally return the `status` state variable.\n\n",
"codeBlocks": {
"style": "",
"code": "const getOnLineStatus = () =>\n typeof navigator !== \"undefined\" && typeof navigator.onLine === \"boolean\"\n ? navigator.onLine\n : true;\n\nconst useNavigatorOnLine = () => {\n const [status, setStatus] = React.useState(getOnLineStatus());\n\n const setOnline = () => setStatus(true);\n const setOffline = () => setStatus(false);\n\n React.useEffect(() => {\n window.addEventListener(\"online\", setOnline);\n window.addEventListener(\"offline\", setOffline);\n\n return () => {\n window.removeEventListener(\"online\", setOnline);\n window.removeEventListener(\"offline\", setOffline);\n };\n }, []);\n\n return status;\n};",
"example": "const StatusIndicator = () => {\n const isOnline = useNavigatorOnLine();\n\n return <span>You are {isOnline ? \"online\" : \"offline\"}.</span>;\n};\n\nReactDOM.render(<StatusIndicator />, document.getElementById(\"root\"));"
},
"tags": [
"hooks",
"state",
"effect",
"intermediate"
]
},
"meta": {
"hash": "c9a0c97f92439438fd49c5ef50742524aae8a162e144342956bcf92cf1ebf470"
}
},
{
"id": "useSSR",
"title": "useSSR",