Merge branch 'master' of github.com:NHSDigital/nhsuk-react-components

Author: Tomdango

src/__tests__/index.test.ts

@@ -20,6 +20,7 @@ describe('Index', () => {
       'Fieldset',
       'Footer',
       'Form',
+      'useFormContext',
       'Header',
       'Hero',
       'Hint',

src/components/form/FormContext.ts

@@ -1,11 +1,15 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface IFormContext {
   setError: (name: string, hasError: boolean) => void;
   isForm: boolean;
 }
 
-export default createContext<IFormContext>({
+const FormContext = createContext<IFormContext>({
   setError: () => {},
   isForm: false,
 });
+
+export const useFormContext = (): IFormContext => useContext<IFormContext>(FormContext);
+
+export default FormContext;

src/components/form/index.ts

@@ -1,3 +1,4 @@
 import Form from './Form';
+export { useFormContext } from './FormContext';
 
 export default Form;

src/components/input/Input.tsx

@@ -1,7 +1,7 @@
-import React, { HTMLProps, useContext, useState, useEffect } from 'react';
+import React, { HTMLProps, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import Hint from '../hint';
-import FormContext, { IFormContext } from '../form/FormContext';
+import { useFormContext } from '../form/FormContext';
 import ErrorMessage from '../error-message';
 
 interface InputProps extends HTMLProps<HTMLInputElement> {
@@ -22,7 +22,7 @@ const Input: React.FC<InputProps> = ({
   error,
   ...rest
 }) => {
-  const { isForm, setError } = useContext<IFormContext>(FormContext);
+  const { isForm, setError } = useFormContext();
   const [name] = useState<string>(
     rest.name || `input_${(Math.random() + 1).toString(36).substring(2, 7)}`,
   );

src/index.ts

@@ -12,7 +12,7 @@ export { default as ErrorMessage } from './components/error-message';
 export { default as ErrorSummary } from './components/error-summary';
 export { default as Fieldset } from './components/fieldset';
 export { default as Footer } from './components/footer';
-export { default as Form } from './components/form';
+export { default as Form, useFormContext } from './components/form';
 export { default as Header } from './components/header';
 export { default as Hero } from './components/hero';
 export { default as Hint } from './components/hint';