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

Update snippets, clean up a bit

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-21 13:28:26 +03:00
parent 958f2768c5
commit da8096a895
7 changed files with 453 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
README.md
View File

@ -56,8 +56,10 @@ import ReactDOM from 'react-dom';
<details>
<summary>View contents</summary>
* [`ClickInside`](#clickinside)
* [`ClickOutside`](#clickoutside)
* [`useClickInside`](#useclickinside)
* [`useClickOutside`](#useclickoutside)
* [`useInterval`](#useinterval)
* [`useTimeout`](#usetimeout)
</details>
@ -66,6 +68,7 @@ import ReactDOM from 'react-dom';
<details>
<summary>View contents</summary>
* [`ControlledInput`](#controlledinput)
* [`LimitedTextarea`](#limitedtextarea)
* [`LimitedWordTextarea`](#limitedwordtextarea)
* [`MultiselectCheckbox`](#multiselectcheckbox)
@ -261,7 +264,7 @@ ReactDOM.render(
## Hooks
### ClickInside
### useClickInside
A hook that handles the event of clicking inside the wrapped component.
@ -269,22 +272,6 @@ A hook that handles the event of clicking inside the wrapped component.
- Use the `React.useEffect()` hook to append and clean up the `click` event.
- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.
```css
.click-box {
border: 2px dashed orangered;
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
p {
border: 2px solid blue;
padding: 16px;
}
```
```jsx
const useClickInside = (ref, callback) => {
const handleClick = e => {
@ -292,29 +279,40 @@ const useClickInside = (ref, callback) => {
callback();
}
};
useEffect(() => {
React.useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
});
};
function ClickBox({ onClickInside }) {
const clickRef = useRef();
useClickInside(clickRef, onClickInside);
return (
<div className="click-box" ref={clickRef}>
<p>Hello Click Me Inside!</p>
</div>
);
}
```
<details>
<summary>Examples</summary>
```jsx
const ClickBox = ({ onClickInside }) => {
const clickRef = React.useRef();
useClickInside(clickRef, onClickInside);
return (
<div
className="click-box"
ref={clickRef}
style={{
border: '2px dashed orangered',
height: 200,
width: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<p>Click inside this element</p>
</div>
);
};
ReactDOM.render(
<ClickBox onClickInside={() => alert('click inside')} />,
document.getElementById('root')
@ -324,7 +322,7 @@ ReactDOM.render(
<br>[⬆ Back to top](#contents)
### ClickOutside
### useClickOutside
A hook that handles the event of clicking outside of the wrapped component.
@ -332,22 +330,6 @@ A hook that handles the event of clicking outside of the wrapped component.
- Use the `React.useEffect()` hook to append and clean up the `click` event.
- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.
```css
.click-box {
border: 2px dashed orangered;
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
p {
border: 2px solid blue;
padding: 16px;
}
```
```jsx
const useClickOutside = (ref, callback) => {
const handleClick = e => {
@ -355,29 +337,40 @@ const useClickOutside = (ref, callback) => {
callback();
}
};
useEffect(() => {
React.useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
});
};
function ClickBox({ onClickOutside }) {
const clickRef = useRef();
useClickOutside(clickRef, onClickOutside);
return (
<div className="click-box" ref={clickRef}>
<p>Hello Click Me Inside!</p>
</div>
);
}
```
<details>
<summary>Examples</summary>
```jsx
const ClickBox = ({ onClickOutside }) => {
const clickRef = React.useRef();
useClickOutside(clickRef, onClickOutside);
return (
<div
className="click-box"
ref={clickRef}
style={{
border: '2px dashed orangered',
height: 200,
width: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<p>Click out of this element</p>
</div>
);
};
ReactDOM.render(
<ClickBox onClickOutside={() => alert('click outside')} />,
document.getElementById('root')
@ -387,11 +380,161 @@ ReactDOM.render(
<br>[⬆ Back to top](#contents)
### useInterval
A hook that implements `setInterval` in a declarative manner.
- Create a custom hook that takes a `callback` and a `delay`.
- Use the `React.useRef()` hook to create a `ref` for the callback function.
- Use the `React.useEffect()` hook to remember the latest callback.
- Use the `Rect.useEffect()` hook to set up the interval and clean up.
```jsx
const useInterval = (callback, delay) => {
const savedCallback = React.useRef();
React.useEffect(() => {
savedCallback.current = callback;
}, [callback]);
React.useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
};
```
<details>
<summary>Examples</summary>
```jsx
const Timer = props => {
const [seconds, setSeconds] = React.useState(0);
useInterval(() => {
setSeconds(seconds + 1);
}, 1000);
return <p>{seconds}</p>;
};
ReactDOM.render(<Timer />, document.getElementById('root'));
```
</details>
<br>[⬆ Back to top](#contents)
### useTimeout
A hook that implements `setTimeout` in a declarative manner.
- Create a custom hook that takes a `callback` and a `delay`.
- Use the `React.useRef()` hook to create a `ref` for the callback function.
- Use the `React.useEffect()` hook to remember the latest callback.
- Use the `Rect.useEffect()` hook to set up the timeout and clean up.
```jsx
const useTimeout = (callback, delay) => {
const savedCallback = React.useRef();
React.useEffect(() => {
savedCallback.current = callback;
}, [callback]);
React.useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setTimeout(tick, delay);
return () => clearTimeout(id);
}
}, [delay]);
};
```
<details>
<summary>Examples</summary>
```jsx
const OneSecondTimer = props => {
const [seconds, setSeconds] = React.useState(0);
useTimeout(() => {
setSeconds(seconds + 1);
}, 1000);
return <p>{seconds}</p>;
};
ReactDOM.render(<OneSecondTimer />, document.getElementById('root'));
```
</details>
<br>[⬆ Back to top](#contents)
---
## Input
### ControlledInput
Renders an `<input>` element with internal state, that uses a callback function to pass its value to the parent component.
- Use object destructuring to set defaults for certain attributes of the `<input>` element.
- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.
- Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.
- Render an `<input>` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.
```jsx
function ControlledInput({
callback,
type = 'text',
disabled = false,
readOnly = false,
defaultValue,
placeholder = ''
}) {
const [value, setValue] = React.useState(defaultValue);
React.useEffect(() => {
callback(value);
}, [value]);
return (
<input
defaultValue={defaultValue}
type={type}
disabled={disabled}
readOnly={readOnly}
placeholder={placeholder}
onChange={({ target: { value } }) => setValue(value)}
/>
);
}
```
<details>
<summary>Examples</summary>
```jsx
ReactDOM.render(
<ControlledInput
type="text"
placeholder="Insert some text here..."
callback={val => console.log(val)}
/>,
document.getElementById('root')
);
```
</details>
<br>[⬆ Back to top](#contents)
### LimitedTextarea
Renders a textarea component with a character limit.

117
snippet_data/snippetList.json
View File

@ -52,40 +52,6 @@
"hash": "24c0b339ea3131a8bde8081b1f44caac1d5014ecc1ac6d25ebf4b14d053a83a8"
}
},
{
"id": "ClickInside",
"type": "snippetListing",
"title": "ClickInside",
"attributes": {
"text": "A hook that handles the event of clicking inside the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.\n\n",
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "16385296d9c0506b9f69f202332e3037d9e4a47d4e04bc68665e26c04e4f7aed"
}
},
{
"id": "ClickOutside",
"type": "snippetListing",
"title": "ClickOutside",
"attributes": {
"text": "A hook that handles the event of clicking outside of the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.\n\n",
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "9666c1e1f30173bcc0be31b4158e569339d4e3f4f95bf60286f448c86432e04e"
}
},
{
"id": "Collapse",
"type": "snippetListing",
@ -103,6 +69,23 @@
"hash": "bb14a75971ab3a395e7a7e4458f636b9309f3e9a376494fe10b716be256bd9d2"
}
},
{
"id": "ControlledInput",
"type": "snippetListing",
"title": "ControlledInput",
"attributes": {
"text": "Renders an `<input>` element with internal state, that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.\n- Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.\n- Render an `<input>` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.\n\n",
"tags": [
"input",
"state",
"effect",
"intermediate"
]
},
"meta": {
"hash": "a9c8332455bad3c81dd1dbaf7361b98406ed11eaa35e9be8e72e88d8139eb2d6"
}
},
{
"id": "CountDown",
"type": "snippetListing",
@ -445,6 +428,72 @@
"meta": {
"hash": "5aff6673123594949dd0d1e72c8fbb586f402b2eb9fdcf8dd9a2b789b4089adb"
}
},
{
"id": "useClickInside",
"type": "snippetListing",
"title": "useClickInside",
"attributes": {
"text": "A hook that handles the event of clicking inside the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.\n\n",
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "f2e5c4b9e8c44a5fb9a1f8002cfbeb2d6090cfe97d4d15dcc575ce89611bb599"
}
},
{
"id": "useClickOutside",
"type": "snippetListing",
"title": "useClickOutside",
"attributes": {
"text": "A hook that handles the event of clicking outside of the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.\n\n",
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "e8f3e64cd0cf616dd42843328234e37b1b7a77ed51da8956204fdb02e088ce33"
}
},
{
"id": "useInterval",
"type": "snippetListing",
"title": "useInterval",
"attributes": {
"text": "A hook that implements `setInterval` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `Rect.useEffect()` hook to set up the interval and clean up.\n\n",
"tags": [
"hooks",
"effect",
"intermediate"
]
},
"meta": {
"hash": "04b22b339da3652cd044203a1d9723af542afe13572a38da825bd093ab1c99af"
}
},
{
"id": "useTimeout",
"type": "snippetListing",
"title": "useTimeout",
"attributes": {
"text": "A hook that implements `setTimeout` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `Rect.useEffect()` hook to set up the timeout and clean up.\n\n",
"tags": [
"hooks",
"effect",
"intermediate"
]
},
"meta": {
"hash": "507c6fc6be62127e00738e39c6b22686a100b8af7252e1bbe589480b126c3d79"
}
}
],
"meta": {

159
snippet_data/snippets.json
View File

@ -70,52 +70,6 @@
"hash": "24c0b339ea3131a8bde8081b1f44caac1d5014ecc1ac6d25ebf4b14d053a83a8"
}
},
{
"id": "ClickInside",
"title": "ClickInside",
"type": "snippet",
"attributes": {
"fileName": "ClickInside.md",
"text": "A hook that handles the event of clicking inside the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.\n\n",
"codeBlocks": {
"style": ".click-box {\r\n border: 2px dashed orangered;\r\n height: 200px;\r\n width: 400px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\np {\r\n border: 2px solid blue;\r\n padding: 16px;\r\n}",
"code": "const useClickInside = (ref, callback) => {\r\n const handleClick = e => {\r\n if (ref.current && ref.current.contains(e.target)) {\r\n callback();\r\n }\r\n };\r\n useEffect(() => {\r\n document.addEventListener('click', handleClick);\r\n return () => {\r\n document.removeEventListener('click', handleClick);\r\n };\r\n });\r\n};\r\n\r\nfunction ClickBox({ onClickInside }) {\r\n const clickRef = useRef();\r\n useClickInside(clickRef, onClickInside);\r\n return (\r\n <div className=\"click-box\" ref={clickRef}>\r\n <p>Hello Click Me Inside!</p>\r\n </div>\r\n );\r\n}",
"example": "ReactDOM.render(\r\n <ClickBox onClickInside={() => alert('click inside')} />,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "16385296d9c0506b9f69f202332e3037d9e4a47d4e04bc68665e26c04e4f7aed"
}
},
{
"id": "ClickOutside",
"title": "ClickOutside",
"type": "snippet",
"attributes": {
"fileName": "ClickOutside.md",
"text": "A hook that handles the event of clicking outside of the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.\n\n",
"codeBlocks": {
"style": ".click-box {\r\n border: 2px dashed orangered;\r\n height: 200px;\r\n width: 400px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\np {\r\n border: 2px solid blue;\r\n padding: 16px;\r\n}",
"code": "const useClickOutside = (ref, callback) => {\r\n const handleClick = e => {\r\n if (ref.current && !ref.current.contains(e.target)) {\r\n callback();\r\n }\r\n };\r\n useEffect(() => {\r\n document.addEventListener('click', handleClick);\r\n return () => {\r\n document.removeEventListener('click', handleClick);\r\n };\r\n });\r\n};\r\n\r\nfunction ClickBox({ onClickOutside }) {\r\n const clickRef = useRef();\r\n useClickOutside(clickRef, onClickOutside);\r\n return (\r\n <div className=\"click-box\" ref={clickRef}>\r\n <p>Hello Click Me Inside!</p>\r\n </div>\r\n );\r\n}",
"example": "ReactDOM.render(\r\n <ClickBox onClickOutside={() => alert('click outside')} />,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "9666c1e1f30173bcc0be31b4158e569339d4e3f4f95bf60286f448c86432e04e"
}
},
{
"id": "Collapse",
"title": "Collapse",
@ -139,6 +93,29 @@
"hash": "bb14a75971ab3a395e7a7e4458f636b9309f3e9a376494fe10b716be256bd9d2"
}
},
{
"id": "ControlledInput",
"title": "ControlledInput",
"type": "snippet",
"attributes": {
"fileName": "ControlledInput.md",
"text": "Renders an `<input>` element with internal state, that uses a callback function to pass its value to the parent component.\n\n- Use object destructuring to set defaults for certain attributes of the `<input>` element.\n- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop.\n- Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated.\n- Render an `<input>` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable.\n\n",
"codeBlocks": {
"style": "",
"code": "function ControlledInput({\r\n callback,\r\n type = 'text',\r\n disabled = false,\r\n readOnly = false,\r\n defaultValue,\r\n placeholder = ''\r\n}) {\r\n const [value, setValue] = React.useState(defaultValue);\r\n\r\n React.useEffect(() => {\r\n callback(value);\r\n }, [value]);\r\n\r\n return (\r\n <input\r\n defaultValue={defaultValue}\r\n type={type}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n placeholder={placeholder}\r\n onChange={({ target: { value } }) => setValue(value)}\r\n />\r\n );\r\n}",
"example": "ReactDOM.render(\r\n <ControlledInput\r\n type=\"text\"\r\n placeholder=\"Insert some text here...\"\r\n callback={val => console.log(val)}\r\n />,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"input",
"state",
"effect",
"intermediate"
]
},
"meta": {
"hash": "a9c8332455bad3c81dd1dbaf7361b98406ed11eaa35e9be8e72e88d8139eb2d6"
}
},
{
"id": "CountDown",
"title": "CountDown",
@ -607,6 +584,96 @@
"meta": {
"hash": "5aff6673123594949dd0d1e72c8fbb586f402b2eb9fdcf8dd9a2b789b4089adb"
}
},
{
"id": "useClickInside",
"title": "useClickInside",
"type": "snippet",
"attributes": {
"fileName": "useClickInside.md",
"text": "A hook that handles the event of clicking inside the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.\n\n",
"codeBlocks": {
"style": "",
"code": "const useClickInside = (ref, callback) => {\r\n const handleClick = e => {\r\n if (ref.current && ref.current.contains(e.target)) {\r\n callback();\r\n }\r\n };\r\n React.useEffect(() => {\r\n document.addEventListener('click', handleClick);\r\n return () => {\r\n document.removeEventListener('click', handleClick);\r\n };\r\n });\r\n};",
"example": "const ClickBox = ({ onClickInside }) => {\r\n const clickRef = React.useRef();\r\n useClickInside(clickRef, onClickInside);\r\n return (\r\n <div\r\n className=\"click-box\"\r\n ref={clickRef}\r\n style={{\r\n border: '2px dashed orangered',\r\n height: 200,\r\n width: 400,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n }}\r\n >\r\n <p>Click inside this element</p>\r\n </div>\r\n );\r\n};\r\n\r\nReactDOM.render(\r\n <ClickBox onClickInside={() => alert('click inside')} />,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "f2e5c4b9e8c44a5fb9a1f8002cfbeb2d6090cfe97d4d15dcc575ce89611bb599"
}
},
{
"id": "useClickOutside",
"title": "useClickOutside",
"type": "snippet",
"attributes": {
"fileName": "useClickOutside.md",
"text": "A hook that handles the event of clicking outside of the wrapped component.\n\n- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event.\n- Use the `React.useEffect()` hook to append and clean up the `click` event.\n- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.\n\n",
"codeBlocks": {
"style": "",
"code": "const useClickOutside = (ref, callback) => {\r\n const handleClick = e => {\r\n if (ref.current && !ref.current.contains(e.target)) {\r\n callback();\r\n }\r\n };\r\n React.useEffect(() => {\r\n document.addEventListener('click', handleClick);\r\n return () => {\r\n document.removeEventListener('click', handleClick);\r\n };\r\n });\r\n};",
"example": "const ClickBox = ({ onClickOutside }) => {\r\n const clickRef = React.useRef();\r\n useClickOutside(clickRef, onClickOutside);\r\n return (\r\n <div\r\n className=\"click-box\"\r\n ref={clickRef}\r\n style={{\r\n border: '2px dashed orangered',\r\n height: 200,\r\n width: 400,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center'\r\n }}\r\n >\r\n <p>Click out of this element</p>\r\n </div>\r\n );\r\n};\r\n\r\nReactDOM.render(\r\n <ClickBox onClickOutside={() => alert('click outside')} />,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"hooks",
"effect",
"event",
"intermediate"
]
},
"meta": {
"hash": "e8f3e64cd0cf616dd42843328234e37b1b7a77ed51da8956204fdb02e088ce33"
}
},
{
"id": "useInterval",
"title": "useInterval",
"type": "snippet",
"attributes": {
"fileName": "useInterval.md",
"text": "A hook that implements `setInterval` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `Rect.useEffect()` hook to set up the interval and clean up.\n\n",
"codeBlocks": {
"style": "",
"code": "const useInterval = (callback, delay) => {\r\n const savedCallback = React.useRef();\r\n\r\n React.useEffect(() => {\r\n savedCallback.current = callback;\r\n }, [callback]);\r\n\r\n React.useEffect(() => {\r\n function tick() {\r\n savedCallback.current();\r\n }\r\n if (delay !== null) {\r\n let id = setInterval(tick, delay);\r\n return () => clearInterval(id);\r\n }\r\n }, [delay]);\r\n};",
"example": "const Timer = props => {\r\n const [seconds, setSeconds] = React.useState(0);\r\n useInterval(() => {\r\n setSeconds(seconds + 1);\r\n }, 1000);\r\n\r\n return <p>{seconds}</p>;\r\n};\r\n\r\nReactDOM.render(<Timer />, document.getElementById('root'));"
},
"tags": [
"hooks",
"effect",
"intermediate"
]
},
"meta": {
"hash": "04b22b339da3652cd044203a1d9723af542afe13572a38da825bd093ab1c99af"
}
},
{
"id": "useTimeout",
"title": "useTimeout",
"type": "snippet",
"attributes": {
"fileName": "useTimeout.md",
"text": "A hook that implements `setTimeout` in a declarative manner.\n\n- Create a custom hook that takes a `callback` and a `delay`.\n- Use the `React.useRef()` hook to create a `ref` for the callback function.\n- Use the `React.useEffect()` hook to remember the latest callback.\n- Use the `Rect.useEffect()` hook to set up the timeout and clean up.\n\n",
"codeBlocks": {
"style": "",
"code": "const useTimeout = (callback, delay) => {\r\n const savedCallback = React.useRef();\r\n\r\n React.useEffect(() => {\r\n savedCallback.current = callback;\r\n }, [callback]);\r\n\r\n React.useEffect(() => {\r\n function tick() {\r\n savedCallback.current();\r\n }\r\n if (delay !== null) {\r\n let id = setTimeout(tick, delay);\r\n return () => clearTimeout(id);\r\n }\r\n }, [delay]);\r\n};",
"example": "const OneSecondTimer = props => {\r\n const [seconds, setSeconds] = React.useState(0);\r\n useTimeout(() => {\r\n setSeconds(seconds + 1);\r\n }, 1000);\r\n\r\n return <p>{seconds}</p>;\r\n};\r\n\r\nReactDOM.render(<OneSecondTimer />, document.getElementById('root'));"
},
"tags": [
"hooks",
"effect",
"intermediate"
]
},
"meta": {
"hash": "507c6fc6be62127e00738e39c6b22686a100b8af7252e1bbe589480b126c3d79"
}
}
],
"meta": {

49
snippets/useClickInside.md
View File

@ -9,22 +9,6 @@ A hook that handles the event of clicking inside the wrapped component.
- Use the `React.useEffect()` hook to append and clean up the `click` event.
- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickInside` hook.
```css
.click-box {
border: 2px dashed orangered;
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
p {
border: 2px solid blue;
padding: 16px;
}
```
```jsx
const useClickInside = (ref, callback) => {
const handleClick = e => {
@ -32,26 +16,37 @@ const useClickInside = (ref, callback) => {
callback();
}
};
useEffect(() => {
React.useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
});
};
function ClickBox({ onClickInside }) {
const clickRef = useRef();
useClickInside(clickRef, onClickInside);
return (
<div className="click-box" ref={clickRef}>
<p>Hello Click Me Inside!</p>
</div>
);
}
```
```jsx
const ClickBox = ({ onClickInside }) => {
const clickRef = React.useRef();
useClickInside(clickRef, onClickInside);
return (
<div
className="click-box"
ref={clickRef}
style={{
border: '2px dashed orangered',
height: 200,
width: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<p>Click inside this element</p>
</div>
);
};
ReactDOM.render(
<ClickBox onClickInside={() => alert('click inside')} />,
document.getElementById('root')

49
snippets/useClickOutside.md
View File

@ -9,22 +9,6 @@ A hook that handles the event of clicking outside of the wrapped component.
- Use the `React.useEffect()` hook to append and clean up the `click` event.
- Use the `React.useRef()` hook to create a `ref` for your click component and pass it to the `useClickOutside` hook.
```css
.click-box {
border: 2px dashed orangered;
height: 200px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
p {
border: 2px solid blue;
padding: 16px;
}
```
```jsx
const useClickOutside = (ref, callback) => {
const handleClick = e => {
@ -32,26 +16,37 @@ const useClickOutside = (ref, callback) => {
callback();
}
};
useEffect(() => {
React.useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
});
};
function ClickBox({ onClickOutside }) {
const clickRef = useRef();
useClickOutside(clickRef, onClickOutside);
return (
<div className="click-box" ref={clickRef}>
<p>Hello Click Me Inside!</p>
</div>
);
}
```
```jsx
const ClickBox = ({ onClickOutside }) => {
const clickRef = React.useRef();
useClickOutside(clickRef, onClickOutside);
return (
<div
className="click-box"
ref={clickRef}
style={{
border: '2px dashed orangered',
height: 200,
width: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
>
<p>Click out of this element</p>
</div>
);
};
ReactDOM.render(
<ClickBox onClickOutside={() => alert('click outside')} />,
document.getElementById('root')

18
snippets/useInterval.md
View File

@ -10,7 +10,6 @@ A hook that implements `setInterval` in a declarative manner.
- Use the `React.useEffect()` hook to remember the latest callback.
- Use the `Rect.useEffect()` hook to set up the interval and clean up.
```jsx
const useInterval = (callback, delay) => {
const savedCallback = React.useRef();
@ -20,7 +19,7 @@ const useInterval = (callback, delay) => {
}, [callback]);
React.useEffect(() => {
function tick () {
function tick() {
savedCallback.current();
}
if (delay !== null) {
@ -32,19 +31,14 @@ const useInterval = (callback, delay) => {
```
```jsx
const Timer = (props) => {
const [seconds,setSeconds] = React.useState(0);
const Timer = props => {
const [seconds, setSeconds] = React.useState(0);
useInterval(() => {
setSeconds(seconds + 1);
}, 1000);
return (
<p>{seconds}</p>
);
}
return <p>{seconds}</p>;
};
ReactDOM.render(
<Timer />,
document.getElementById('root')
);
ReactDOM.render(<Timer />, document.getElementById('root'));
```

18
snippets/useTimeout.md
View File

@ -10,7 +10,6 @@ A hook that implements `setTimeout` in a declarative manner.
- Use the `React.useEffect()` hook to remember the latest callback.
- Use the `Rect.useEffect()` hook to set up the timeout and clean up.
```jsx
const useTimeout = (callback, delay) => {
const savedCallback = React.useRef();
@ -20,7 +19,7 @@ const useTimeout = (callback, delay) => {
}, [callback]);
React.useEffect(() => {
function tick () {
function tick() {
savedCallback.current();
}
if (delay !== null) {
@ -32,19 +31,14 @@ const useTimeout = (callback, delay) => {
```
```jsx
const OneSecondTimer = (props) => {
const [seconds,setSeconds] = React.useState(0);
const OneSecondTimer = props => {
const [seconds, setSeconds] = React.useState(0);
useTimeout(() => {
setSeconds(seconds + 1);
}, 1000);
return (
<p>{seconds}</p>
);
}
return <p>{seconds}</p>;
};
ReactDOM.render(
<OneSecondTimer />,
document.getElementById('root')
);
ReactDOM.render(<OneSecondTimer />, document.getElementById('root'));
```