React Native goForm

Staged Form Support

Installation   |   Functionalities   |   Documentation   |   License   |   Technology   |   Autor   |   Demo

:wrench: Installation

1# Install React Native goForm
2
3yarn add goform
4
5# or if you prefer
6
7npm install goform
8

: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.

1    import Form from 'goform';
2
3    //Activate the form in stages, by default it is false
4    multiStep: boolean
5
6    //Receives an object containing the initial value for each form field.
7    initialValueofFields = {},
8
9    //Receives a function and returns the filled data as a parameter.
10    onSubmit = (data) => console.log(data)
11
12    //It has 2 animations for transitioning forms ('opacity' | 'scale').
13    animationStyle = "opacity" -> default value null,
14
15    //Duration of animation on form switch.
16    animationDuration = 240,
17
18    //Reference of the form, has how to return some features.
19    ref
20

References useRef(null)

1    //Returns the active page number
2    activePage: number
3
4    //Skip to next page function
5    nextPage(): void
6
7    //Function to return to previous next
8    proviousPage(): void
9
10    //Returns true if it is the last page
11    isLastPage: boolean
12
13    //Submit form and receive data in the Form component's onSubmit
14    handleSubmit(): void
15
16    //Receive an object with errors
17    setErrors(object)
18
19    //Return errors
20    getErrors: () => errors

:blush: Simple documentation for the Group component.

1    import { Group } from 'goform';
2
3    //Receive the group name within the form
4    groupName = {},

:star: Simple Exemple

1  // Input component
2  import React from 'react';
3  import { useUtil } from 'goForm/utils';
4
5  const Input = ({name}) => {
6  const { setValue, defaultValue, value } = useUtil(
7    name,
8  );
9
10    return (
11      <>
12       <TextInput
13        defaultValue={defaultValue}
14        value={value}
15        onChangeText={setValue}
16       />
17      </>
18    )
19  }
20
21  export {Input}
22
23  //App Component
24
25  import React, {useRef} from 'react';
26  import {Pressable, Text} from 'react-native';
27
28  import Form, {IFormFunctions} from 'goform';
29  import { Input } from './input';
30
31  const App = () => {
32    const formRef = useRef<IFormFunctions>(null)
33
34    const handleSubmit = (data) => {
35      console.log(data)//{email: '...', password: '...'}
36    }
37
38    return (
39      <Form onSubmit={handleSubmit} ref={formRef}>
40        <Input name="email" />
41        <Input name="password" />
42
43        <Pressable onPress={formRef.current?.handleSubmit()}>
44          <Text>Enviar</Text>
45        </Pressable>
46      </Form>
47    )
48  };
49
50  export default App;

:star: complex example

1  // styled components
2  import styled, {css} from 'styled-components/native';
3
4  interface IPropInput{
5    isErrored: boolean;
6    isFocused: boolean;
7  }
8
9  export const Container = styled.View<IPropInput>`
10    background-color: #999;
11    border-width: 2px;
12    border-color: #999;
13
14    ${props =>
15      props.isErrored &&
16      css`
17        border-color: #c53030;
18      `}
19
20    ${props =>
21      props.isFocused &&
22      css`
23        border-color: #fff;
24      `}
25  `;
26
27
28  // Input component
29  import React from 'react';
30  import { useUtil } from 'goForm/utils';
31
32  import { Container } from './styles';
33
34  const Input = ({name}) => {
35    const [isFocused, setIsFocused] = useState(false);
36
37    const { setValue, error, defaultValue, clearFieldError, value } = useUtil(
38    name,
39    );
40
41    const handleInputFocus = useCallback(() => {
42    if (error) clearFieldError();
43    setIsFocused(true);
44  }, [error, clearFieldError]);
45
46     const handleInputBlur = useCallback(() => {
47    setIsFocused(false);
48    }, []);
49
50    return (
51      <Container isFocused={isFocused} isErrored={!!error}>
52        <TextInput
53          onFocus={handleInputFocus}
54          onBlur={handleInputBlur}
55          defaultValue={defaultValue}
56          value={value}
57          onChangeText={setValue}
58        />
59      </Container>
60    )
61  }
62
63  export {Input}
64
65  //App Component
66
67  import React, {useRef} from 'react';
68  import {Pressable, Text} from 'react-native';
69
70  import Form, { IFormFunctions,Group } from 'goform';
71  import { Input } from './input';
72
73  const App = () => {
74    const formRef = useRef<IFormFunctions>(null)
75
76    const handleSubmit = (data) => {
77      console.log(data) //Result below
78      // {
79      //   name: '...',
80      //   email: '...',
81      //   password: '...',
82      //   address: [
83      //     {
84      //       road: '...',
85      //       district: '...',
86      //       city: '...',
87      //       state: '...'
88      //     },
89      //     {
90      //       road: '...',
91      //       district: '...',
92      //       city: '...',
93      //       state: '...'
94      //     }
95      //   ],
96      //   profile: {
97      //     username: '...',
98      //     description: '...',
99      //     phone: '...'
100      //   }
101      // }
102    }
103
104    return (
105      <Form onSubmit={handleSubmit} ref={formRef}>
106        <Input name="name" />
107        <Input name="email" />
108        <Input name="password" />
109
110        <Group groupName="address[0]">
111          <Input name="road" />
112          <Input name="district" />
113          <Input name="city" />
114          <Input name="state" />
115        </Group>
116
117        <Group groupName="address[1]">
118          <Input name="road" />
119          <Input name="district" />
120          <Input name="city" />
121          <Input name="state" />
122        </Group>
123
124
125        <Group groupName="profile">
126          <Input name="username" />
127          <Input name="description" />
128          <Input name="phone" />
129        </Group>
130
131
132        <Pressable onPress={formRef.current?.handleSubmit()}>
133          <Text>Enviar</Text>
134        </Pressable>
135      </Form>
136    )
137  };
138
139  export default App;

:star: Complex example with steps

1  //getValidationErrors
2  import { ValidationError } from 'yup';
3
4  interface Errors {
5    [key: string]: string;
6  }
7
8  export default function getValidationErrors(err: ValidationError): Errors {
9    const validationErrors: Errors = {};
10
11    err.inner.forEach(error => {
12      validationErrors[error.path] = error.message;
13    });
14
15    return validationErrors;
16  }
17
18
19  // styled components
20  import styled, {css} from 'styled-components/native';
21
22  interface IPropInput{
23    isErrored: boolean;
24    isFocused: boolean;
25  }
26
27  export const Container = styled.View<IPropInput>`
28    background-color: #999;
29    border-width: 2px;
30    border-color: #999;
31
32    ${props =>
33      props.isErrored &&
34      css`
35        border-color: #c53030;
36      `}
37
38    ${props =>
39      props.isFocused &&
40      css`
41        border-color: #fff;
42      `}
43  `;
44
45
46  // Input component
47  import React from 'react';
48  import { useUtil } from 'goForm/utils';
49
50  import { Container } from './styles';
51
52  const Input = ({name}) => {
53    const [isFocused, setIsFocused] = useState(false);
54
55    const { setValue, error, defaultValue, clearFieldError, value } = useUtil(
56    name,
57    );
58
59    const handleInputFocus = useCallback(() => {
60    if (error) clearFieldError();
61    setIsFocused(true);
62  }, [error, clearFieldError]);
63
64     const handleInputBlur = useCallback(() => {
65    setIsFocused(false);
66    }, []);
67
68    return (
69      <Container isFocused={isFocused} isErrored={!!error}>
70        <TextInput
71          onFocus={handleInputFocus}
72          onBlur={handleInputBlur}
73          defaultValue={defaultValue}
74          value={value}
75          onChangeText={setValue}
76        />
77      </Container>
78    )
79  }
80
81  export {Input}
82
83
84  //Page 01
85  import {Pressable, Text} from 'react-native';
86  import * as Yup from 'yup';
87  import { useForm } from 'goform';
88  import getValidationErrors from './getValidationErrors';
89
90  interface IFormProps {
91    name: string;
92    email: string;
93    password: string;
94  }
95
96  const Page01 = () => {
97    const { nextPage, getData, setErrors } = useForm();
98
99    async function handleNextPage(){
100      try {
101        const data = getData<IFormProps>();
102
103        const schema = Yup.object().shape({
104          name: Yup.string().required(),
105          email: Yup.string().required(),
106          password: Yup.string().required(),
107        });
108
109        await schema.validate(data, {
110          abortEarly: false,
111        });
112
113        nextPage();
114
115      catch(err){
116        if (err instanceof Yup.ValidationError) {
117          const errors = getValidationErrors(err);
118          setErrors(errors);
119        }
120      }
121    }
122
123    return (
124      <>
125        <Input name="name" />
126        <Input name="email" />
127        <Input name="password" />
128
129        <Pressable onPress={handleNextPage}>
130          <Text>Next</Text>
131        </Pressable>
132      </>
133    )
134  }
135
136  export default Page01;
137
138
139
140  //Page 02
141  import {Pressable, Text} from 'react-native';
142  import * as Yup from 'yup';
143  import { useForm, Group } from 'goform';
144  import getValidationErrors from './getValidationErrors';
145
146  interface IFormProps {
147    name: string;
148    email: string;
149    password: string;
150  }
151
152  const Page01 = () => {
153    const {proviousPage, getData, setErrors } = useForm();
154
155    async function handleFinish(){
156      try {
157        const data = getData<IFormProps>();
158
159        const schema = Yup.object().shape({
160          profile: Yup.object().shape({
161            username: Yup.string().required(),
162            phone: Yup.string().required(),
163        }),
164        address: Yup.array().of(
165          Yup.object().shape({
166            city: Yup.string().required(),
167            state: Yup.string().required(),
168          }),
169          ),
170        });
171
172        await schema.validate(data, {
173          abortEarly: false,
174        });
175
176        //Here it can be any action you want.
177
178      catch(err){
179        if (err instanceof Yup.ValidationError) {
180          const errors = getValidationErrors(err);
181          setErrors(errors);
182        }
183      }
184    }
185
186    return (
187      <>
188        <Group groupName="address[0]">
189          <Input name="city" />
190          <Input name="state" />
191        </Group>
192
193        <Group groupName="address[1]">
194          <Input name="city" />
195          <Input name="state" />
196        </Group>
197
198
199        <Group groupName="profile">
200          <Input name="username" />
201          <Input name="phone" />
202        </Group>
203
204        <Pressable onPress={handleFinish}>
205          <Text>Submit</Text>
206        </Pressable>
207
208        <Pressable onPress={proviousPage}>
209          <Text>Previous page</Text>
210        </Pressable>
211      </>
212    )
213  }
214
215  export default Page02;
216
217
218
219  //App Component
220  import React, {useRef} from 'react';
221
222  import Form, { IFormFunctions } from 'goform';
223
224  import Page01 from './page01';
225  import Page02 from './page02';
226
227  const App = () => {
228    const formRef = useRef<IFormFunctions>(null)
229
230    return (
231      //To enable paging in the form, pass multiStep in the Form component
232      <Form ref={formRef} style={{flex: 1}} multiStep>
233        <Page01 />
234        <Page02 />
235      </Form>
236    )
237  };
238
239  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