Build README

README.md

@@ -57,6 +57,7 @@ import ReactDOM from 'react-dom';
 * [Input](#input)
 * [LimitedTextarea](#limitedtextarea)
 * [LimitedWordTextarea](#limitedwordtextarea)
+* [MultiselectCheckbox](#multiselectcheckbox)
 * [PasswordRevealer](#passwordrevealer)
 * [Select](#select)
 * [TextArea](#textarea)
@@ -379,6 +380,78 @@ ReactDOM.render(
 
 <br>[⬆ Back to top](#table-of-contents)
 
+### MultiselectCheckbox
+
+Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.
+
+Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.
+Create a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callbac passed via the component's props.
+Render a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.
+Each `<input>` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `<li>` element's `onClick` handler.
+
+```jsx
+const style = {
+  listContainer: {
+    listStyle: 'none',
+    paddingLeft: 0
+  },
+  itemStyle: {
+    cursor: 'pointer',
+    padding: 5
+  }
+};
+
+function MultiselectCheckbox ({ options, onChange }) {
+  const [data, setData] = React.useState(options);
+
+  const toggle = (item) => {
+    data.map((_, key) => {
+      if (data[key].label === item.label) 
+        data[key].checked = !item.checked;
+    });
+    setData([...data]);
+    onChange(data);
+  }
+
+  return (
+    <ul style={style.listContainer}>
+      {data.map(item => {
+        return (
+          <li
+            key={item.label}
+            style={style.itemStyle}
+            onClick={() => toggle(item)}
+          >
+            <input readOnly type='checkbox' checked={item.checked || false} />
+            {item.label}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+```
+
+<details>
+<summary>Examples</summary>
+
+```jsx
+const options = [{ label: "Item One" }, { label: "Item Two" }];
+
+ReactDOM.render(
+  <MultiselectCheckbox
+    options={options}
+    onChange={data => {
+      console.log(data);
+    }}
+  />,
+  document.getElementById("root")
+);
+```
+</details>
+
+<br>[⬆ Back to top](#table-of-contents)
+
 ### PasswordRevealer
 
 Renders a password input field with a reveal button.

data/snippet_data.json

@@ -188,6 +188,22 @@
       "<!-expertise: 1 -->"
     ]
   },
+  {
+    "name": "MultiselectCheckbox.md",
+    "title": "MultiselectCheckbox",
+    "text": "Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component.\n\nUse `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop.\nCreate a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callbac passed via the component's props.\nRender a `<ul>` element and use `Array.prototype.map()` to map the `data` state variable to individual `<li>` elements with `<input>` elements as their children.\nEach `<input>` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `<li>` element's `onClick` handler.\n\n",
+    "codeBlocks": [
+      "```jsx\nconst style = {\n  listContainer: {\n    listStyle: 'none',\n    paddingLeft: 0\n  },\n  itemStyle: {\n    cursor: 'pointer',\n    padding: 5\n  }\n};\n\nfunction MultiselectCheckbox ({ options, onChange }) {\n  const [data, setData] = React.useState(options);\n\n  const toggle = (item) => {\n    data.map((_, key) => {\n      if (data[key].label === item.label) \n        data[key].checked = !item.checked;\n    });\n    setData([...data]);\n    onChange(data);\n  }\n\n  return (\n    <ul style={style.listContainer}>\n      {data.map(item => {\n        return (\n          <li\n            key={item.label}\n            style={style.itemStyle}\n            onClick={() => toggle(item)}\n          >\n            <input readOnly type='checkbox' checked={item.checked || false} />\n            {item.label}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n```",
+      "```jsx\nconst options = [{ label: \"Item One\" }, { label: \"Item Two\" }];\n\nReactDOM.render(\n  <MultiselectCheckbox\n    options={options}\n    onChange={data => {\n      console.log(data);\n    }}\n  />,\n  document.getElementById(\"root\")\n);\n```"
+    ],
+    "expertise": 1,
+    "tags": [
+      "input",
+      "state",
+      "array"
+    ],
+    "notes": []
+  },
   {
     "name": "PasswordRevealer.md",
     "title": "PasswordRevealer",