All Projects → fateh999 → react-native-paper-form-builder

fateh999 / react-native-paper-form-builder

Licence: MIT license
React Native Paper Form Builder with inbuilt Validation, dropdown, autocomplete, checkbox, switch and radio inputs.

Programming Languages

typescript
32286 projects
java
68154 projects - #9 most used programming language
objective c
16641 projects - #2 most used programming language
javascript
184084 projects - #8 most used programming language
ruby
36898 projects - #4 most used programming language
Starlark
911 projects

Projects that are alternatives of or similar to react-native-paper-form-builder

TextFieldsTraversalController
A controller to manage the traversal of a collection of textfields.
Stars: ✭ 15 (-84.21%)
Mutual labels:  form
BulkPDF
BulkPDF is a free and easy to use open source software, which allows to automatically fill an existing PDF form with differen values. Only a spreadsheet (Microsoft Excel 2007/2010/2013, LibreOffice or OpenOffice Calc) with the desired values is required.
Stars: ✭ 94 (-1.05%)
Mutual labels:  form
SwiftUIFormValidator
Declarative form validator for SwiftUI.
Stars: ✭ 34 (-64.21%)
Mutual labels:  form
stook
A minimalist design state management library for React.
Stars: ✭ 86 (-9.47%)
Mutual labels:  form
vue-form-2
Vue.js 2 Form Component
Stars: ✭ 60 (-36.84%)
Mutual labels:  form
Rails-4-ElasticSearch-dynamic-facets
Rails 4 ElasticSearch integration with dynamic facets
Stars: ✭ 16 (-83.16%)
Mutual labels:  form
json-schema-js-gui-model
Handy gui model and associated translator that can be used to construct javascript UI forms from json-schemas
Stars: ✭ 19 (-80%)
Mutual labels:  form
vue-use-form
✅ A Vue.js composition API function to validate forms
Stars: ✭ 97 (+2.11%)
Mutual labels:  form
jquery.niceform
The jQuery plugin for validation and post form data to server
Stars: ✭ 16 (-83.16%)
Mutual labels:  form
EasyForm-Android
该项目是一个android端用于生成复杂表格的库。可以用来做像Excel表格那样的UI界面。
Stars: ✭ 17 (-82.11%)
Mutual labels:  form
bulma-material-form
Material Design Form Elements for Bulma (CSS Only)
Stars: ✭ 26 (-72.63%)
Mutual labels:  form
grapesjs-plugin-forms
Set of form components and blocks for the GrapesJS editor
Stars: ✭ 39 (-58.95%)
Mutual labels:  form
vue-auto-form
A vue2 component that helpers to easily create basic forms with automatic insert and update events, and automatic reactive validation.
Stars: ✭ 39 (-58.95%)
Mutual labels:  form
dynamic-input-fields-reactjs
Example of the dynamic input fields in ReactJS
Stars: ✭ 31 (-67.37%)
Mutual labels:  form
vue3-form-validation
Vue Composition Function for Form Validation
Stars: ✭ 18 (-81.05%)
Mutual labels:  form
GenerateDynamicCustomForm
You can generate a dynamic form view in a few minutes for a signup, add a record. Creating a form is very easy.
Stars: ✭ 18 (-81.05%)
Mutual labels:  form
laravel-nova-nested-form
This package allows you to include your nested relationships' forms into a parent form.
Stars: ✭ 225 (+136.84%)
Mutual labels:  form
typo3-formlog
Form log for TYPO3
Stars: ✭ 16 (-83.16%)
Mutual labels:  form
ngx-typed-forms
Extends Angular reactive forms strongly typed
Stars: ✭ 27 (-71.58%)
Mutual labels:  form
form-create-designer
好用的vue可视化表单设计器
Stars: ✭ 634 (+567.37%)
Mutual labels:  form

react-native-paper-form-builder

This is readme file for version 2+, For v1 doc go to this link

npm version npm downloads npm npm

Form Builder written in typescript with inbuilt Validation, dropdown, autocomplete powered by react-hook-form & react-native-paper.

Dependencies to Install :

Note :

For maintainability this library will only target latest versions of react-hook-form and react-native-paper.

Documentation :

Demo :

Steps to install :

npm install react-native-paper-form-builder

or

yarn add react-native-paper-form-builder
import {FormBuilder} from 'react-native-paper-form-builder';

Usage :

import React from 'react';
import {View, StyleSheet, ScrollView, Text} from 'react-native';
import {FormBuilder} from 'react-native-paper-form-builder';
import {useForm} from 'react-hook-form';
import {Button} from 'react-native-paper';

function BasicExample() {
  const {control, setFocus, handleSubmit} = useForm({
    defaultValues: {
      email: '',
      password: '',
    },
    mode: 'onChange',
  });

  return (
    <View style={styles.containerStyle}>
      <ScrollView contentContainerStyle={styles.scrollViewStyle}>
        <Text style={styles.headingStyle}>Form Builder Basic Demo</Text>
        <FormBuilder
          control={control}
          setFocus={setFocus}
          formConfigArray={[
            {
              type: 'email',
              name: 'email',

              rules: {
                required: {
                  value: true,
                  message: 'Email is required',
                },
              },
              textInputProps: {
                label: 'Email',
              },
            },
            {
              type: 'password',
              name: 'password',
              rules: {
                required: {
                  value: true,
                  message: 'Password is required',
                },
              },
              textInputProps: {
                label: 'Password',
              },
            },
          ]}
        />
        <Button
          mode={'contained'}
          onPress={handleSubmit((data: any) => {
            console.log('form data', data);
          })}>
          Submit
        </Button>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
  },
  scrollViewStyle: {
    flex: 1,
    padding: 15,
    justifyContent: 'center',
  },
  headingStyle: {
    fontSize: 30,
    textAlign: 'center',
    marginBottom: 40,
  },
});

export default BasicExample;

For More Advanced Example as in the Demo check App.tsx

fateh999




Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].