goform v1.1.6

:wrench: Installation

# Install React Native goForm

yarn add goform

# or if you prefer

npm install goform

:sparkles: Functionalities

:heavy_check_mark: Creating simple forms. :heavy_check_mark: Creating more complex forms. :heavy_check_mark: Easy to use

:blush: Simple documentation for the Form component.

    import Form from 'goform';

    //Activate the form in stages, by default it is false
    multiStep: boolean

    //Receives an object containing the initial value for each form field.
    initialValueofFields = {},

    //Receives a function and returns the filled data as a parameter.
    onSubmit = (data) => console.log(data)

    //It has 2 animations for transitioning forms ('opacity' | 'scale').
    animationStyle = "opacity" -> default value null,

    //Duration of animation on form switch.
    animationDuration = 240,

    //Reference of the form, has how to return some features.
    ref

References useRef(null)

    //Returns the active page number
    activePage: number

    //Skip to next page function
    nextPage(): void

    //Function to return to previous next
    proviousPage(): void

    //Returns true if it is the last page
    isLastPage: boolean

    //Submit form and receive data in the Form component's onSubmit
    handleSubmit(): void

    //Receive an object with errors
    setErrors(object)

    //Return errors
    getErrors: () => errors

:blush: Simple documentation for the Group component.

    import { Group } from 'goform';

    //Receive the group name within the form
    groupName = {},

:star: Simple Exemple

  // Input component
  import React from 'react';
  import { useUtil } from 'goForm/utils';

  const Input = ({name}) => {
  const { setValue, defaultValue, value } = useUtil(
    name,
  );

    return (
      <>
       <TextInput
        defaultValue={defaultValue}
        value={value}
        onChangeText={setValue}
       />
      </>
    )
  }

  export {Input}

  //App Component

  import React, {useRef} from 'react';
  import {Pressable, Text} from 'react-native';

  import Form, {IFormFunctions} from 'goform';
  import { Input } from './input';

  const App = () => {
    const formRef = useRef<IFormFunctions>(null)

    const handleSubmit = (data) => {
      console.log(data)//{email: '...', password: '...'}
    }

    return (
      <Form onSubmit={handleSubmit} ref={formRef}>
        <Input name="email" />
        <Input name="password" />

        <Pressable onPress={formRef.current?.handleSubmit()}>
          <Text>Enviar</Text>
        </Pressable>
      </Form>
    )
  };

  export default App;

:star: complex example

  // styled components
  import styled, {css} from 'styled-components/native';

  interface IPropInput{
    isErrored: boolean;
    isFocused: boolean;
  }

  export const Container = styled.View<IPropInput>`
    background-color: #999;
    border-width: 2px;
    border-color: #999;

    ${props =>
      props.isErrored &&
      css`
        border-color: #c53030;
      `}

    ${props =>
      props.isFocused &&
      css`
        border-color: #fff;
      `}
  `;


  // Input component
  import React from 'react';
  import { useUtil } from 'goForm/utils';

  import { Container } from './styles';

  const Input = ({name}) => {
    const [isFocused, setIsFocused] = useState(false);

    const { setValue, error, defaultValue, clearFieldError, value } = useUtil(
    name,
    );

    const handleInputFocus = useCallback(() => {
    if (error) clearFieldError();
    setIsFocused(true);
  }, [error, clearFieldError]);

     const handleInputBlur = useCallback(() => {
    setIsFocused(false);
    }, []);

    return (
      <Container isFocused={isFocused} isErrored={!!error}>
        <TextInput
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
          defaultValue={defaultValue}
          value={value}
          onChangeText={setValue}
        />
      </Container>
    )
  }

  export {Input}

  //App Component

  import React, {useRef} from 'react';
  import {Pressable, Text} from 'react-native';

  import Form, { IFormFunctions,Group } from 'goform';
  import { Input } from './input';

  const App = () => {
    const formRef = useRef<IFormFunctions>(null)

    const handleSubmit = (data) => {
      console.log(data) //Result below
      // {
      //   name: '...',
      //   email: '...',
      //   password: '...',
      //   address: [
      //     {
      //       road: '...',
      //       district: '...',
      //       city: '...',
      //       state: '...'
      //     },
      //     {
      //       road: '...',
      //       district: '...',
      //       city: '...',
      //       state: '...'
      //     }
      //   ],
      //   profile: {
      //     username: '...',
      //     description: '...',
      //     phone: '...'
      //   }
      // }
    }

    return (
      <Form onSubmit={handleSubmit} ref={formRef}>
        <Input name="name" />
        <Input name="email" />
        <Input name="password" />

        <Group groupName="address[0]">
          <Input name="road" />
          <Input name="district" />
          <Input name="city" />
          <Input name="state" />
        </Group>

        <Group groupName="address[1]">
          <Input name="road" />
          <Input name="district" />
          <Input name="city" />
          <Input name="state" />
        </Group>


        <Group groupName="profile">
          <Input name="username" />
          <Input name="description" />
          <Input name="phone" />
        </Group>


        <Pressable onPress={formRef.current?.handleSubmit()}>
          <Text>Enviar</Text>
        </Pressable>
      </Form>
    )
  };

  export default App;

:star: Complex example with steps

  //getValidationErrors
  import { ValidationError } from 'yup';

  interface Errors {
    [key: string]: string;
  }

  export default function getValidationErrors(err: ValidationError): Errors {
    const validationErrors: Errors = {};

    err.inner.forEach(error => {
      validationErrors[error.path] = error.message;
    });

    return validationErrors;
  }


  // styled components
  import styled, {css} from 'styled-components/native';

  interface IPropInput{
    isErrored: boolean;
    isFocused: boolean;
  }

  export const Container = styled.View<IPropInput>`
    background-color: #999;
    border-width: 2px;
    border-color: #999;

    ${props =>
      props.isErrored &&
      css`
        border-color: #c53030;
      `}

    ${props =>
      props.isFocused &&
      css`
        border-color: #fff;
      `}
  `;


  // Input component
  import React from 'react';
  import { useUtil } from 'goForm/utils';

  import { Container } from './styles';

  const Input = ({name}) => {
    const [isFocused, setIsFocused] = useState(false);

    const { setValue, error, defaultValue, clearFieldError, value } = useUtil(
    name,
    );

    const handleInputFocus = useCallback(() => {
    if (error) clearFieldError();
    setIsFocused(true);
  }, [error, clearFieldError]);

     const handleInputBlur = useCallback(() => {
    setIsFocused(false);
    }, []);

    return (
      <Container isFocused={isFocused} isErrored={!!error}>
        <TextInput
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
          defaultValue={defaultValue}
          value={value}
          onChangeText={setValue}
        />
      </Container>
    )
  }

  export {Input}


  //Page 01
  import {Pressable, Text} from 'react-native';
  import * as Yup from 'yup';
  import { useForm } from 'goform';
  import getValidationErrors from './getValidationErrors';

  interface IFormProps {
    name: string;
    email: string;
    password: string;
  }

  const Page01 = () => {
    const { nextPage, getData, setErrors } = useForm();

    async function handleNextPage(){
      try {
        const data = getData<IFormProps>();

        const schema = Yup.object().shape({
          name: Yup.string().required(),
          email: Yup.string().required(),
          password: Yup.string().required(),
        });

        await schema.validate(data, {
          abortEarly: false,
        });

        nextPage();

      catch(err){
        if (err instanceof Yup.ValidationError) {
          const errors = getValidationErrors(err);
          setErrors(errors);
        }
      }
    }

    return (
      <>
        <Input name="name" />
        <Input name="email" />
        <Input name="password" />

        <Pressable onPress={handleNextPage}>
          <Text>Next</Text>
        </Pressable>
      </>
    )
  }

  export default Page01;



  //Page 02
  import {Pressable, Text} from 'react-native';
  import * as Yup from 'yup';
  import { useForm, Group } from 'goform';
  import getValidationErrors from './getValidationErrors';

  interface IFormProps {
    name: string;
    email: string;
    password: string;
  }

  const Page01 = () => {
    const {proviousPage, getData, setErrors } = useForm();

    async function handleFinish(){
      try {
        const data = getData<IFormProps>();

        const schema = Yup.object().shape({
          profile: Yup.object().shape({
            username: Yup.string().required(),
            phone: Yup.string().required(),
        }),
        address: Yup.array().of(
          Yup.object().shape({
            city: Yup.string().required(),
            state: Yup.string().required(),
          }),
          ),
        });

        await schema.validate(data, {
          abortEarly: false,
        });

        //Here it can be any action you want.

      catch(err){
        if (err instanceof Yup.ValidationError) {
          const errors = getValidationErrors(err);
          setErrors(errors);
        }
      }
    }

    return (
      <>
        <Group groupName="address[0]">
          <Input name="city" />
          <Input name="state" />
        </Group>

        <Group groupName="address[1]">
          <Input name="city" />
          <Input name="state" />
        </Group>


        <Group groupName="profile">
          <Input name="username" />
          <Input name="phone" />
        </Group>

        <Pressable onPress={handleFinish}>
          <Text>Submit</Text>
        </Pressable>

        <Pressable onPress={proviousPage}>
          <Text>Previous page</Text>
        </Pressable>
      </>
    )
  }

  export default Page02;



  //App Component
  import React, {useRef} from 'react';

  import Form, { IFormFunctions } from 'goform';

  import Page01 from './page01';
  import Page02 from './page02';

  const App = () => {
    const formRef = useRef<IFormFunctions>(null)

    return (
      //To enable paging in the form, pass multiStep in the Form component
      <Form ref={formRef} style={{flex: 1}} multiStep>
        <Page01 />
        <Page02 />
      </Form>
    )
  };

  export default App;

:rocket: Technology

The following tools were used in the construction of the project:

• Node.js
• React Native
• TypeScript
• Dot Object

:memo: License

This project is under MIT license. See the archive LICENSE for more details.

Done with :heart: per Mateus Conceição

Back to the top