1.0.114 • Published 3 years ago

react-with-native-form v1.0.114

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

react-with-native-form

Plug-and-play yet unopinionated and extensible forms constructor for React and React Native apps

Installation

  1. make sure you install react-with-native

  2. yarn add react-with-native-form

Usage

Choose the packages you want to include for the different input types:

yarn add react-with-native-text-input react-with-native-password-input react-with-native-toggle-input react-with-native-select-input react-with-native-textarea-input react-with-native-date-input react-with-native-phone-input react-with-native-number-input

Then create a wrapper like this:

import DataForm, {
    setConfig,
    makeInputField,
    Field,
    Keys,
    DataFormProps,
    Plugin,
  } from "react-with-native-form";

  import TextInput, { TextInputType } from "react-with-native-text-input";
  import PasswordInput, {
    PasswordInputType,
  } from "react-with-native-password-input";
  import ToggleInput, { ToggleInputType } from "react-with-native-toggle-input";
  import ImageInput, { ImageInputType, ImageValue } from "./ImageInput";

  import SelectInput, { SelectInputType } from "react-with-native-select-input";
  import TextAreaInput, {
    TextAreaInputType,
  } from "react-with-native-textarea-input";
  import DateInput, { DateInputType } from "react-with-native-date-input";
  import PhoneInput, { PhoneInputType } from "react-with-native-phone-input";
  import NumberInput, { NumberInputType } from "react-with-native-number-input";
  import { getEnv } from "react-with-native";

  export const isValidImage = (value: ImageValue | null) =>
    !!value?.base64 && !!value?.url;

  const text = {
    component: TextInput,
  };


  const phone = {
    component: PhoneInput,
  };
  const date = {
    component: DateInput,
  };
  const password = {
    component: PasswordInput,
  };

  const toggle = {
    component: ToggleInput,
  };

  const image = {
    component: ImageInput,
  };


  const select = {
    component: SelectInput,
  };


  const textArea = {
    component: TextAreaInput,
  };

  const number = {
    component: NumberInput,
  };

  const plugins = {
    text,
    password,
    toggle,
    image,
    select,
    textArea,
    date,
    phone,
    number,
  };

  export const makeField = <T extends Keys<AllInputs>>(
    type: T,
    config: Omit<Field<AllInputs, T>, "type">
  ) => makeInputField<AllInputs, T>(type, config);

  export interface AllInputs {
    text: TextInputType;
    password: PasswordInputType;
    toggle: ToggleInputType;
    image: ImageInputType;
    select: SelectInputType;
    textArea: TextAreaInputType;
    date: DateInputType;
    phone: PhoneInputType;
    number: NumberInputType;
  }

  export const Form = <TState extends { [key: string]: any } = any>(
    props: DataFormProps<AllInputs, TState>
  ) =>
    setConfig<AllInputs, TState>(DataForm, {
      plugins,
    })(props);

Now you can create a form like this:

#import this
import { Form, makeField } from "../components/form";

# define your fields
const fields =
      [
          makeField("text", {
            field: "username",
            title: "Username",
            startSection: true,
            sectionTitle: "Account",
            extra: {
              placeholder: "Username",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false)
                ? "Fill in a username that's less than 256 characters"
                : false,
          }),

          makeField("text", {
            field: "email",
            title: "Email",
            extra: {
              placeholder: "Email",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false)
                ? "Fill in an email that's less than 256 characters"
                : false,
          }),

          makeField("password", {
            field: "password1",
            title: "Password",
            extra: {
              placeholder: "password",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false, 1024)
                ? "Fill in a password shorter than 1024 characters"
                : false,
          }),

          makeField("password", {
            field: "password2",
            title: "Repeat Password",
            extra: {
              placeholder: "password",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false, 1024)
                ? "Fill in a password shorter than 1024 characters"
                : false,
          }),

          makeField("text", {
            field: "name",
            title: "Name",
            startSection: true,
            sectionTitle: "Personal Information",
            extra: {
              placeholder: "Name",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false)
                ? "Fill in a name that's less than 256 characters"
                : false,
          }),

          makeField("text", {
            field: "phone",
            title: "Phone number",
            extra: {
              placeholder: "Phone number",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false)
                ? "Fill in a phone number"
                : false,
          }),

          makeField("text", {
            field: "country",
            title: "Country",
            startSection: true,
            sectionTitle: "Geography",
            extra: {
              placeholder: "Country",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false)
                ? "Fill in a country that's less than 256 characters"
                : false,
          }),

          makeField("text", {
            field: "city",
            title: "City",
            extra: {
              placeholder: "City",
            },
            hasError: (value) =>
              !isValidVarchar(value as string, false)
                ? "Fill in a city that's less than 256 characters"
                : false,
          }),
        ];

# render this
 <Form
    title="Become a host"
    fields={fields}
    onSubmit={(values,resolve,reject) => {

        //do something with those values
    }}
    />

And you're done!

1.0.109

3 years ago

1.0.110

3 years ago

1.0.112

3 years ago

1.0.111

3 years ago

1.0.114

3 years ago

1.0.113

3 years ago

1.0.107

3 years ago

1.0.106

3 years ago

1.0.108

3 years ago

1.0.105

3 years ago

1.0.104

3 years ago

1.0.101

3 years ago

1.0.100

3 years ago

1.0.103

3 years ago

1.0.102

3 years ago

1.0.98

3 years ago

1.0.97

3 years ago

1.0.96

3 years ago

1.0.95

3 years ago

1.0.94

3 years ago

1.0.93

3 years ago

1.0.92

3 years ago

1.0.91

3 years ago

1.0.90

3 years ago

1.0.89

3 years ago

1.0.88

3 years ago

1.0.87

3 years ago

1.0.86

3 years ago

1.0.85

3 years ago

1.0.84

3 years ago

1.0.83

3 years ago

1.0.82

3 years ago

1.0.81

3 years ago

1.0.80

3 years ago

1.0.79

3 years ago

1.0.78

3 years ago

1.0.77

3 years ago

1.0.76

3 years ago

1.0.75

3 years ago

1.0.74

3 years ago

1.0.73

3 years ago

1.0.72

3 years ago

1.0.71

3 years ago

1.0.70

3 years ago

1.0.69

3 years ago

1.0.68

3 years ago

1.0.67

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.49

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.40

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.21

4 years ago

1.0.17

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago