Adding example using hooks

Author: atomicpages

docs/src/sections/Indeterminate.js

@@ -5,6 +5,9 @@ import { Checkbox } from 'pretty-checkbox-react';
 import { Title } from '../components/Title';
 import { CollapseContainer } from '../components/CollapseContainer';
 
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { darcula } from 'react-syntax-highlighter/dist/styles/prism';
+
 import {
     LiveProvider,
     LiveEditor,
@@ -41,7 +44,8 @@ const indeterminateExample = `class Indeterminate extends React.Component {
                     shape="curve"
                     onChange={this.handleCheckboxChange.bind(this)}
                     checked={this.state.checked}
-                    icon={<i className={"mdi " + (this.state.indeterminate ? "mdi-minus" : "mdi-check")} />}>Indeterminate</Checkbox>
+                    icon={<i className={"mdi " + (this.state.indeterminate ? "mdi-minus" : "mdi-check")} />}>
+                    Indeterminate</Checkbox>
                 <button className="btn btn-small ml-auto mr-2"
                     onClick={() => this.setState({
                         indeterminate: true,
@@ -54,6 +58,44 @@ const indeterminateExample = `class Indeterminate extends React.Component {
 }
 `;
 
+const withHooks = `// converting the class example to use hooks...
+import * as React from 'react';
+import { Checkbox } from 'pretty-checkbox-react';
+
+function Indeterminate(props) {
+    const [indeterminate, setIndeterminate] = React.useState(props.indeterminate);
+    const [checked, setChecked ] = React.useState(props.checked);
+
+    const handleCheckboxChange = React.useCallback(() => {
+        setChecked(!checked);
+
+        if (indeterminate) {
+            setIndeterminate(false);
+        }
+    }, [checked, setChecked, indeterminate, setIndeterminate]);
+
+    return (
+        <>
+            <Checkbox indeterminate={indeterminate}
+                shape="curve"
+                onChange={handleCheckboxChange}
+                checked={checked}
+                icon={
+                    <i className={"mdi "
+                    + (indeterminate ? "mdi-minus" : "mdi-check")} />
+                }>
+                Indeterminate</Checkbox>
+            <button className="btn btn-small ml-auto mr-2"
+                onClick={() => {
+                    setIndeterminate(true);
+                    setChecked(true);
+                }}
+                disabled={indeterminate}>Apply</button>
+        </>
+    );
+}
+`;
+
 function Image() {
     return (
         <>
@@ -70,6 +112,11 @@ function Image() {
                         </>
                     </CollapseContainer>
                 </LiveProvider>
+                <CollapseContainer title="With Hooks" collapsed={false}>
+                    <p>React hooks are relatively new and are currently in alpha.
+                        If you are on the bleeding edge then this implementation is for you! <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank" rel="nofollow noreferrer noopener">Read more about hooks</a>.</p>
+                    <SyntaxHighlighter language="javascript" style={darcula}>{withHooks}</SyntaxHighlighter>
+                </CollapseContainer>
             </div>
         </>
     );