-
-
-### Hooks
-
-View contents
- -* [`DataList`](#datalist) -* [`DataTable`](#datatable) -* [`MappedTable`](#mappedtable) - -
-
-
-### Input
-
-View contents
- -* [`useClickInside`](#useclickinside) -* [`useClickOutside`](#useclickoutside) -* [`useFetch`](#usefetch) -* [`useInterval`](#useinterval) -* [`useNavigatorOnLine`](#usenavigatoronline) -* [`useSSR`](#usessr) -* [`useTimeout`](#usetimeout) - -
-
-
-### Visual
-
-View contents
- -* [`ControlledInput`](#controlledinput) -* [`LimitedTextarea`](#limitedtextarea) -* [`LimitedWordTextarea`](#limitedwordtextarea) -* [`MultiselectCheckbox`](#multiselectcheckbox) -* [`PasswordRevealer`](#passwordrevealer) -* [`Select`](#select) -* [`Slider`](#slider) -* [`TagInput`](#taginput) -* [`TextArea`](#textarea) -* [`UncontrolledInput`](#uncontrolledinput) - -
-
-
-
----
-
-## Array
-
-
-### DataList
-
-Renders a list of elements from an array of primitives.
-
-- Use the value of the `isOrdered` prop to conditionally render a `View contents
- -* [`Accordion`](#accordion-) -* [`Alert`](#alert) -* [`AutoLink`](#autolink-) -* [`Carousel`](#carousel) -* [`Collapse`](#collapse) -* [`CountDown`](#countdown-) -* [`FileDrop`](#filedrop) -* [`Loader`](#loader) -* [`Mailto`](#mailto) -* [`Modal`](#modal) -* [`RippleButton`](#ripplebutton) -* [`StarRating`](#starrating) -* [`Tabs`](#tabs) -* [`Ticker`](#ticker) -* [`Toggle`](#toggle) -* [`Tooltip`](#tooltip) -* [`TreeView`](#treeview-) - -- ` or `
- ` 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(, document.getElementById('root')); -ReactDOM.render(, document.getElementById('root')); -``` -
[⬆ Back to top](#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 ( - - -
- ); -} -``` - -- - - - {data.map((val, i) => ( -ID -Value -- - ))} - -{i} -{val} --- -Examples
- -```jsx -const people = ['John', 'Jesse']; -ReactDOM.render(, document.getElementById('root')); -``` -
[⬆ Back to top](#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. - -_This component does not work with nested objects and will break if there are nested objects inside any of the properties specified in `propertyNames`_ - -```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 => ( - - - - {filteredData.map((val, i) => ( -{val} - ))} -- {propertyNames.map(p => ( - - ))} - -{val[p]} - ))} --- -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](#contents) - ---- - -## Hooks - - -### useClickInside - -A hook that handles the event of clicking inside the wrapped component. - -- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event. -- 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. - -```jsx -const useClickInside = (ref, callback) => { - const handleClick = e => { - if (ref.current && ref.current.contains(e.target)) { - callback(); - } - }; - React.useEffect(() => { - document.addEventListener('click', handleClick); - return () => { - document.removeEventListener('click', handleClick); - }; - }); -}; -``` - --- -Examples
- -```jsx -const ClickBox = ({ onClickInside }) => { - const clickRef = React.useRef(); - useClickInside(clickRef, onClickInside); - return ( --- ); -}; - -ReactDOM.render( -Click inside this element
-alert('click inside')} />, - document.getElementById('root') -); -``` -
[⬆ Back to top](#contents) - -### useClickOutside - -A hook that handles the event of clicking outside of the wrapped component. - -- Create a custom hook that takes a `ref` and a `callback` to handle the `click` event. -- 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. - -```jsx -const useClickOutside = (ref, callback) => { - const handleClick = e => { - if (ref.current && !ref.current.contains(e.target)) { - callback(); - } - }; - React.useEffect(() => { - document.addEventListener('click', handleClick); - return () => { - document.removeEventListener('click', handleClick); - }; - }); -}; -``` - --- -Examples
- -```jsx -const ClickBox = ({ onClickOutside }) => { - const clickRef = React.useRef(); - useClickOutside(clickRef, onClickOutside); - return ( --- ); -}; - -ReactDOM.render( -Click out of this element
-alert('click outside')} />, - document.getElementById('root') -); -``` -
[⬆ Back to top](#contents) - -### useFetch - -A hook that implements `fetch` in a declarative manner. - -- Create a custom hook that takes a `url` and `options`. -- Use the `React.useState()` hook to initialize the `response` and `error` state variables. -- Use the `React.useEffect()` hook to anychronously call `fetch()` and update the state varaibles accordingly. -- Return an object containting the `response` and `error` state variables. - -```jsx -const useFetch = (url, options) => { - const [response, setResponse] = React.useState(null); - const [error, setError] = React.useState(null); - - React.useEffect(() => { - const fetchData = async () => { - try { - const res = await fetch(url, options); - const json = await res.json(); - setResponse(json); - } catch (error) { - setError(error); - } - }; - fetchData(); - }, []); - - return { response, error }; -}; -``` - --- -Examples
- -```jsx -const ImageFetch = props => { - const res = useFetch('https://dog.ceo/api/breeds/image/random', {}); - if (!res.response) { - returnLoading...; - } - const imageUrl = res.response.message; - return ( --- ); -}; - -ReactDOM.render(-
, document.getElementById('root')); -``` -
[⬆ 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 `React.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]); -}; -``` - --- -Examples
- -```jsx -const Timer = props => { - const [seconds, setSeconds] = React.useState(0); - useInterval(() => { - setSeconds(seconds + 1); - }, 1000); - - return{seconds}
; -}; - -ReactDOM.render(, document.getElementById('root')); -``` -
[⬆ 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; -}; -``` - --- -Examples
- -```jsx -const StatusIndicator = () => { - const isOnline = useNavigatorOnLine(); - - return You are {isOnline ? "online" : "offline"}.; -}; - -ReactDOM.render(, document.getElementById("root")); -``` -
[⬆ Back to top](#contents) - -### useSSR - -A hook that checks if the code is running on the browser or the server. - -- Create a custom hook that returns an appropriate object. -- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser. -- Use the `React.useState()` hook to define the `inBrowser` state variable. -- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end. -- Use the `React.useMemo()` to memoize the return values of the custom hook. - -```jsx -const isDOMavailable = !!( - typeof window !== 'undefined' && - window.document && - window.document.createElement -); - -const useSSR = (callback, delay) => { - const [inBrowser, setInBrowser] = React.useState(isDOMavailable); - - React.useEffect(() => { - setInBrowser(isDOMavailable); - return () => { - setInBrowser(false); - } - }, []); - - const useSSRObject = React.useMemo(() => ({ - isBrowser: inBrowser, - isServer: !inBrowser, - canUseWorkers: typeof Worker !== 'undefined', - canUseEventListeners: inBrowser && !!window.addEventListener, - canUseViewport: inBrowser && !!window.screen - }), [inBrowser]); - - return React.useMemo(() => Object.assign(Object.values(useSSRObject), useSSRObject), [inBrowser]); -}; -``` - --- -Examples
- -```jsx -const SSRChecker = props => { - let { isBrowser, isServer } = useSSR(); - - return{ isBrowser ? 'Running on browser' : 'Running on server' }
; -}; - -ReactDOM.render(, document.getElementById('root')); -``` -
[⬆ 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 `React.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]); -}; -``` - --- -Examples
- -```jsx -const OneSecondTimer = props => { - const [seconds, setSeconds] = React.useState(0); - useTimeout(() => { - setSeconds(seconds + 1); - }, 1000); - - return{seconds}
; -}; - -ReactDOM.render(, document.getElementById('root')); -``` -
[⬆ Back to top](#contents) - ---- - -## Input - - -### ControlledInput - -Renders an `` 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 `` 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 `` 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 ( - setValue(value)} - /> - ); -} -``` - --- -Examples
- -```jsx -ReactDOM.render( -console.log(val)} - />, - document.getElementById('root') -); -``` -
[⬆ Back to top](#contents) - -### LimitedTextarea - -Renders a textarea component with a character limit. - -- Use the `React.useState()` hook to create the `content` state variable and set its value to `value`. - Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`. -- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable. -- Use a`` to wrap both the`
- ` list.
-- Use `Array.prototype.map` to render every item in `data` as a `