native-x-form

This component helps you add and manage form in react native

Install

Yarn

yarn add native-x-form

NPM

npm install native-x-form

Usage

import { Form, FormItem, isEmpty, isInvalidEmail } from 'native-x-form'
import { Button } from 'native-x-button'
import { TextInput } from 'native-x-text-input'
import { Stack } from 'native-x-stack'

interface FormData {
  email: string
  password: string
}

const state: FormData = {
  email: '',
  password: '',
}

function MyComponent() {
  const onSubmit = useCallback(
    async ({ state: { email, password }, isValid }: { state: FormData; isValid: boolean }) => {
      if (!isValid) {
        return
      }
      // your logic
    },
    [],
  )

  return (
    <Form<FormData> state={state} onSubmit={onSubmit}>
      {({ submitForm }) => (
        <Stack>
          <FormItem name='email' validators={[isEmpty('Email is required'), isInvalidEmail()]}>
            <TextInput />
          </FormItem>
          <Button onTap={submitForm}>Submit</Button>
        </Stack>
      )}
    </Form>
  )
}

Any component can be placed inside FormItem as long as the props are extended from FormChildProp

export type AcceptableFormValue = string | boolean | number

type FormChildProp<T extends AcceptableFormValue> = {
  value?: T
  onChange?: (value: T) => void
  onChangeText?: (value: T) => void
  onBlur?: () => void
  error?: string | Error | null
  isLoading?: boolean
}

Sample implementation:

import { FormChildProps } from 'native-x-form'

interface InputProps extends FormChildProps<string> {
  ...
}

function Input(props: InputProps) {
  const {
    value,
    onChange,
    onChangeText,
    onBlur,
    error,
    isLoading
  } = props
  return (
    ...
  )
}

API - Form

| Property | Default Value | Usage | | ----------------------------------------------------------------- | ------------- | ----------------------------------- | | state?: T | any | State of the form | | submitIfValid?: boolean | true | Call onSubmit only if form is valid | | children?: ReactNode[] | | Content of the form | | onSubmit?: (props: { state: T, isValid: boolean}) => Promise | | Handler for submitting the form | | onChange?: (props: { state: T, isValid: boolean}) => Promise | | Event handler for change |

API - Form-Item

| Property | Default Value | Usage | | -------------------------- | ------------- | ---------------------------------------------------- | | name: string | any | Name of the item in state. This input is mandatory | | children?: ReactNode[] | | Content of the form | | validators: Validator[] | | An array of validators |

Validators

You can build a custom validator function by implementing Validator<T> type

export type Validator<T> = (input: T) => string | undefined

The return value of Validator function must be the error message.

Few validator function creators are provided with this module.

isEmpty(errorMessage: string): Validator<T>
isInvalidEmail(errorMessage: string): Validator<T>
isNonAlphaNumeric(errorMessage: string): Validator<T>

Automatic Release

Here is an example of the release type that will be done based on a commit messages:

| Commit message | Release type | | ------------------- | --------------------- | | fix: [comment] | Patch Release | | feat: [comment] | Minor Feature Release | | perf: [comment] | Major Feature Release | | doc: [comment] | No Release | | refactor: [comment] | No Release | | chore: [comment] | No Release |