window.ENTITIES={'/api/snippets/jsx/react%20-%20usearray()%20custom%20hook%20example':[{"result":true,"message":null,"batch":{"type":"jsx","name":"react - usearray() custom hook example","items":[{"id":"1edebj","type":"jsx","name":"React - useArray() custom hook example","content":"// ONLINE-RUNNER:browser;\n\nimport React, { useState, useMemo } from 'react';\n\n// ----------------------\n\n// Read more here: https://dirask.com/snippets/jmJNN1\n//\nconst useProxy = (action) => {\n const state = useMemo(\n () => ({\n wrapper: (...args) => {\n if (state.action) {\n return state.action(...args);\n }\n return undefined;\n }\n }),\n []\n );\n state.action = action;\n return state.wrapper;\n};\n\n// ----------------------\n\n// Read more here: https://dirask.com/snippets/D7XEop\n\nconst prependItem = (updater, item) => {\n updater(array => [].concat(item, array));\n};\n\nconst appendItem = (updater, item) => {\n updater(array => [].concat(array, item));\n};\n \nconst replaceItem = (updater, index, item) => {\n updater(array => array.map((value, i) => i === index ? item : value));\n};\n\nconst removeItem = (updater, index) => {\n updater(array => array.filter((value, i) => i !== index));\n};\n\n// ----------------------\n\nconst useArray = (initialArray = []) => {\n const [items, setItems] = useState(initialArray);\n return {\n getItems: useProxy(() => items),\n setItems: useProxy((items) => setItems(items)),\n prependItem: useProxy((item) => prependItem(setItems, item)),\n appendItem: useProxy((item) => appendItem(setItems, item)),\n replaceItem: useProxy((index, item) => replaceItem(setItems, index, item)),\n removeItem: useProxy((index, item) => removeItem(setItems, index)),\n isEmpty: useProxy(() => items.length === 0),\n };\n};\n\n// ----------------------\n\n\n// Usage example:\n\nlet counter = 0;\n\nconst App = () => {\n const array = useArray([]);\n const handlePrependClick = () => array.prependItem((++counter) + '-prepended');\n const handleAppendedClick = () => array.appendItem((++counter) + '-appended ');\n const items = array.getItems();\n return (\n
\n
\n \n
\n
\n 
\n            {items.map((item, index) => {\n                const handleReplaceClick = () => array.replaceItem(index, (++counter) + '-replaced ');\n                const handleRemoveClick = () => array.removeItem(index);\n                return (\n                    
\n                      {item}\n                      {' '}\n                      \n                      \n                    
\n                );\n            })}  \n
\n
\n
\n \n
\n
\n );\n};\n\nexport default App;","source":"","author":{"id":"9oAE8o","name":"Lilly-Grace-Greig","avatar":"1629131828804__9oAE8o__w40px_h40px.jpg","points":571,"role":"BASIC"},"creationTime":1652098497000,"updateTime":1679009128000,"removalTime":null}]}}]};