diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index b512c09d4..000000000
--- a/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-node_modules
\ No newline at end of file
diff --git a/README.md b/README.md
index e307f7443..6dc107662 100644
--- a/README.md
+++ b/README.md
@@ -4,1176 +4,4 @@
> Curated collection of useful React snippets that you can understand in 30 seconds or less.
-#### Related projects
-
-* [30 Seconds of Code](https://30secondsofcode.org)
-* [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/)
-* [30 Seconds of Interviews](https://30secondsofinterviews.org/)
-
-## Table of Contents
-
-
-### Array
-
-
-View contents
-
-* [DataList](#datalist)
-* [DataTable](#datatable)
-* [MappedTable](#mappedtable)
-
-
-
-### Input
-
-
-View contents
-
-* [Input](#input)
-* [LimitedTextarea](#limitedtextarea)
-* [PasswordRevealer](#passwordrevealer)
-* [Select](#select)
-* [TextArea](#textarea)
-
-
-
-### String
-
-
-View contents
-
-* [AutoLink](#autolink)
-
-
-
-### Visual
-
-
-View contents
-
-* [Carousel](#carousel)
-* [Collapse](#collapse)
-* [Mailto](#mailto)
-* [ModalDialog](#modaldialog)
-* [StarRating](#starrating)
-* [Tab](#tab)
-* [Ticker](#ticker)
-* [Toggle](#toggle)
-* [Tooltip](#tooltip)
-
-
-
----
-
-## Array
-### DataList
-
-Renders a list of elements from an array of primitives.
-
-Use the value of the `isOrdered` prop to conditionally render a `` or `
` list.
-Use `Array.prototype.map` to render every item in `data` as a `
` element, give it a `key` produced from the concatenation of the its index and value.
-Omit the `isOrdered` prop to render a `
` list by default.
-
-```jsx
-function DataList({ isOrdered, data }) {
- const list = data.map((val, i) => (
-
{val}
- ));
- return isOrdered ? {list} :
{list}
;
-}
-```
-
-
-Examples
-
-```jsx
-const names = ['John', 'Paul', 'Mary'];
-ReactDOM.render(
-
- [⬆ Back to top](#table-of-contents)
-
-### DataTable
-
-Renders a table with rows dynamically created from an array of primitives.
-
-Render a `
` element with two columns (`ID` and `Value`).
-Use `Array.prototype.map` to render every item in `data` as a `
` element, consisting of its index and value, give it a `key` produced from the concatenation of the two.
-
-```jsx
-function DataTable({ data }) {
- return (
-
-
-
-
ID
-
Value
-
-
-
- {data.map((val, i) =>
-
-
{i}
-
{val}
-
- )}
-
-
- );
-}
-```
-
-
-Examples
-
-```jsx
-const people = ['John', 'Jesse'];
-ReactDOM.render(
- ,
- document.getElementById('root')
-);
-```
-
-
- [⬆ Back to top](#table-of-contents)
-
-### MappedTable
-
-Renders a table with rows dynamically created from an array of objects and a list of property names.
-
-Use `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.
-Render a `
` element with a set of columns equal to the amount of values in `propertyNames`.
-Use `Array.prototype.map` to render each value in the `propertyNames` array as a `
` element.
-Use `Array.prototype.map` to render each object in the `filteredData` array as a `
` element, containing a `
` for each key in the object.
-
-```jsx
-function MappedTable({ data, propertyNames }) {
- let filteredData = data.map(v =>
- Object.keys(v)
- .filter(k => propertyNames.includes(k))
- .reduce((acc, key) => ((acc[key] = v[key]), acc), {})
- );
- return (
-
-
-
{propertyNames.map(val =>
{val}
)}
-
-
- {filteredData.map((val, i) => (
-
- {propertyNames.map(p =>
{val[p]}
)}
-
- ))}
-
-
- );
-}
-```
-#### Notes
-
-This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`.,,
-
-
-Examples
-
-```jsx
-const people = [
- { name: 'John', surname: 'Smith', age: 42 },
- { name: 'Adam', surname: 'Smith', gender: 'male' }
-];
-const propertyNames = ['name', 'surname', 'age'];
-ReactDOM.render(
- ,
- document.getElementById('root')
-);
-```
-
-
- [⬆ Back to top](#table-of-contents)
-
-
-## Input
-### Input
-
-Renders an `` element that uses a callback function to pass its value to the parent component.
-
-Use object destructuring to set defaults for certain attributes of the `` element.
-Render an `` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
-
-```jsx
-function Input ({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
- return (
- callback(value)}
- />
- );
-}
-```
-
-
-Examples
-
-```jsx
-ReactDOM.render(
- console.log(val)}/>,
- document.getElementById('root')
-);
-```
-
-
- [⬆ Back to top](#table-of-contents)
-
-### LimitedTextarea
-
-Renders a textarea component with a character limit.
-
-Use the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.
-Create a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.
-In the`render()` method, use a`
` to wrap both the`
-
{this.state.characterCount}/{this.props.limit}
-
- );
- }
-}
-```
-
-
-Examples
-
-```jsx
-ReactDOM.render(
- ,
- document.getElementById('root')
-);
-```
-
-
- [⬆ Back to top](#table-of-contents)
-
-### PasswordRevealer
-
-Renders a password input field with a reveal button.
-
-Initially set `state.shown` to `false` to ensure that the password is not shown by default.
-Create a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.
-In the`render()` method, use a`
` to wrap both the`` and the `
\n );\n }\n}\n```",
- "```jsx\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n```"
- ],
- "expertise": 0,
- "tags": [
- "input",
- "state",
- "class"
- ],
- "notes": []
- },
- {
- "name": "Mailto.md",
- "title": "Mailto",
- "text": "Renders a link formatted to send an email.\n\nDestructure the component's props, use `email`, `subject` and `body` to create a `` element with an appropriate `href` attribute.\nRender the link with `props.children` as its content.\n\n",
- "codeBlocks": [
- "```jsx\nfunction Mailto({ email, subject, body, ...props }) {\n return (\n \n {props.children}\n \n );\n}\n```",
- "```jsx\nReactDOM.render(\n \n Mail me!\n ,\n document.getElementById(\"root\")\n);\n```"
- ],
- "expertise": 0,
- "tags": [
- "visual",
- "functional"
- ],
- "notes": []
- },
- {
- "name": "MappedTable.md",
- "title": "MappedTable",
- "text": "Renders a table with rows dynamically created from an array of objects and a list of property names.\n\nUse `Object.keys()`, `Array.prototype.filter()`, `Array.prototype.includes()` and `Array.prototype.reduce()` to produce a `filteredData` array, containing all objects with the keys specified in `propertyNames`.\nRender a `
` element with a set of columns equal to the amount of values in `propertyNames`.\nUse `Array.prototype.map` to render each value in the `propertyNames` array as a `
` element.\nUse `Array.prototype.map` to render each object in the `filteredData` array as a `
` element, containing a `
` for each key in the object.\n\n",
- "codeBlocks": [
- "```jsx\nfunction MappedTable({ data, propertyNames }) {\n let filteredData = data.map(v =>\n Object.keys(v)\n .filter(k => propertyNames.includes(k))\n .reduce((acc, key) => ((acc[key] = v[key]), acc), {})\n );\n return (\n
\n \n
{propertyNames.map(val =>
{val}
)}
\n \n \n {filteredData.map((val, i) => (\n
\n {propertyNames.map(p =>
{val[p]}
)}\n
\n ))}\n \n
\n );\n}\n```",
- "```jsx\nconst people = [\n { name: 'John', surname: 'Smith', age: 42 },\n { name: 'Adam', surname: 'Smith', gender: 'male' }\n];\nconst propertyNames = ['name', 'surname', 'age'];\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n```"
- ],
- "expertise": 1,
- "tags": [
- "array",
- "object",
- "functional"
- ],
- "notes": [
- "This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`.",
- "",
- ""
- ]
- },
- {
- "name": "ModalDialog.md",
- "title": "ModalDialog",
- "text": "Renders a dialog component in a modal, controllable through events. \nTo use the component, import `ModalDialog` only once and then display it using `ModalDialog.show()`, passing the JSX templates and data as parameters.\n\nDefine `modalHandler`, a method that will handle showing the modal dialog, set `state` to the default values initially and bind the `close` and `modalClick` methods to the component's context.\nDefine `close` and `modalClick` to toggle the visibility of the modal dialog, based on `state.closeOnClick`.\nUse the CustomEvent API to listen for `modal` events, that can be dispatched from the `static` `show()` method, handle listeners appropriately from `componentDidMount` and `componentWillUnmount`.\n\nThe `show()` method accepts an argument, that should contain three parameters:\n* `title`, a string for the dialog's title\n* `closeOnClick`, `true` if the modal should close on click or `false` if it should only close when clicking the *X* button\n* `content`, which is the JSX content to be rendered inside the dialog\n\nFinally, in the `render()` method, use a `
\n }\n componentDidMount() {\n document.addEventListener('modal', this.modalHandler);\n }\n componentWillUnmount() {\n document.removeEventListener('modal', this.modalHandler);\n }\n close() {\n this.setState({\n visible: false,\n data: {\n title: '',\n closeOnClick: false,\n content: ''\n }\n });\n }\n static show(data) {\n document.dispatchEvent(new CustomEvent('modal', {\n detail: {\n data\n }\n }));\n }\n modalClick() {\n if (this.state.data.closeOnClick) this.close();\n }\n}\n```",
- "```jsx\n// add to render function\n\n\n// every time you wanna call the dialog\n// content is a jsx element\nModalDialog.show({\n title: 'Hello, world!',\n closeOnClick: true,\n content: \n}); \n```"
- ],
- "expertise": 1,
- "tags": [
- "visual",
- "static",
- "children",
- "state",
- "class"
- ],
- "notes": [
- "This component includes a lot of CSS, which might conflict with other CSS in your project. It is recomended for the modal to be a direct child of the body tag.",
- "A more up-to-date method with lower compatibility is to use [Portals](https://reactjs.org/docs/portals.html) in React 16+.",
- "",
- ""
- ]
- },
- {
- "name": "PasswordRevealer.md",
- "title": "PasswordRevealer",
- "text": "Renders a password input field with a reveal button.\n\nInitially set `state.shown` to `false` to ensure that the password is not shown by default.\nCreate a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.\nIn the`render()` method, use a`
![](\"https://github.com/30-seconds/30-seconds-of-react/blob/master/logo.png\"/)
\n}); \n```"
- ],
- "expertise": 1,
- "tags": [
- "visual",
- "static",
- "children",
- "state",
- "class"
- ],
- "notes": [
- "This component includes a lot of CSS, which might conflict with other CSS in your project. It is recomended for the modal to be a direct child of the body tag.",
- "A more up-to-date method with lower compatibility is to use [Portals](https://reactjs.org/docs/portals.html) in React 16+.",
- "",
- ""
- ]
- },
- {
- "name": "PasswordRevealer.md",
- "title": "PasswordRevealer",
- "text": "Renders a password input field with a reveal button.\n\nInitially set `state.shown` to `false` to ensure that the password is not shown by default.\nCreate a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.\nIn the`render()` method, use a`` to wrap both the`` and the `