@rhc-shared-components/scroll-to-error

@rhc-shared-components/scroll-to-error

This scroll-to-error component can be used to scroll the page towards the first error of the form.

Install

npm install --save @rhc-shared-components/scroll-to-error

## Usage

```tsx
import React from 'react';
import { Form, Formik } from 'formik';
import * as Yup from 'yup';
import { Title } from "@patternfly/react-core";
import { FormTextInput } from "@rhc-shared-components/form-text-input";
import { ScrollToError } from '@rhc-shared-components/scroll-to-error';

enum ExampleEnum{
  FieldName ='companyLogo'
}

export const VALIDATIONSCHEMA = () => {
  return Yup.object().shape({
  [ExampleEnum.FieldName]:
  Yup.string().required("required")
  })
}

const App = () => {
  return (
    <div>
      <Title headingLevel={'h1'}>Text Input with formik</Title>
      <Formik
        initialValues={{
          [ExampleEnum.FieldName]: 'this is a test text'
        }}
        validationSchema={VALIDATIONSCHEMA}
        enableReinitialize={true}
        onSubmit={() => {
        }}>
          <Form>
        <FormTextInput
          name={ExampleEnum.FieldName}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={ExampleEnum.FieldName}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={"FieldName2"}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={"FieldName3"}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={"FieldName4"}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={"FieldName5"}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={"FieldName6"}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
         <FormTextInput
          name={"FieldName7"}
          label={'helloWorld label'}
          helperText={'helloWorld helper'}
          isRequired={true}
        />
        <ScrollToError/>
        <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div> );
}


export default App;

License

MIT © authorGithubUsername