1.0.4 • Published 3 years ago
native-x-form v1.0.4
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 |