Merge pull request #12 from createnl/forward-refs

Forward checkbox refs

.eslintrc.js

@@ -26,5 +26,12 @@ module.exports = {
     "jest",
   ],
   "rules": {
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   }
 };

README.md

@@ -181,3 +181,31 @@ The value of an onChange parameter looks like:
 ]
 ```
 Note that the value of the NoneCheckerCheckbox will not be passed.
+
+### Accessing the native input
+The `Checkbox`, `AllCheckerCheckbox` and `NoneCheckerCheckboxes` are nothing more than controlled native input elements and uses the [forwardRef](https://reactjs.org/docs/forwarding-refs.html) function for you to pass your ref to.
+This enables you to control the DOM node and for example focus on the element.
+
+``` jsx harmony
+import React from "react";
+import { AllCheckerCheckbox, Checkbox, CheckboxGroup } from '@createnl/grouped-checkboxes';
+
+const MyGroupedCheckboxes = (props) => {
+    const checkboxRef = React.createRef();
+
+    React.useEffect(() => {
+        if (checkboxRef.current) {
+            // Focus on the input element
+            checkboxRef.current.focus();
+        }
+    }, [checkboxRef])
+
+    return (
+        <CheckboxGroup>
+          <AllCheckerCheckbox />
+          <Checkbox ref={checkboxRef} value="option-1"/>
+          <Checkbox value="option-2" />
+          <Checkbox value="option-3" />
+        </CheckboxGroup>
+    );
+};

dist/AllCheckerCheckbox.d.ts

@@ -1,6 +1,4 @@
-import React, { FC } from 'react';
-interface AllCheckerCheckboxProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    checked?: never;
-}
-declare const AllCheckerCheckbox: FC<AllCheckerCheckboxProps>;
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
+declare type AllCheckerCheckboxProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & RefAttributes<HTMLInputElement>, 'checked'>;
+declare const AllCheckerCheckbox: ForwardRefExoticComponent<AllCheckerCheckboxProps>;
 export default AllCheckerCheckbox;

dist/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
-declare type CheckboxProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const Checkbox: FC<CheckboxProps>;
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
+declare type CheckboxProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & RefAttributes<HTMLInputElement>;
+declare const Checkbox: ForwardRefExoticComponent<CheckboxProps>;
 export default Checkbox;

dist/NoneCheckerCheckbox.d.ts

@@ -1,6 +1,4 @@
-import React, { FC } from 'react';
-interface NoneCheckerCheckboxProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    checked?: never;
-}
-declare const NoneCheckerCheckbox: FC<NoneCheckerCheckboxProps>;
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
+declare type NoneCheckerCheckboxProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & RefAttributes<HTMLInputElement>, 'checked'>;
+declare const NoneCheckerCheckbox: ForwardRefExoticComponent<NoneCheckerCheckboxProps>;
 export default NoneCheckerCheckbox;