https://github.com/rintoj/native-x-form
https://github.com/rintoj/native-x-form
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/rintoj/native-x-form
- Owner: rintoj
- Created: 2021-02-04T07:43:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-18T09:52:07.000Z (over 4 years ago)
- Last Synced: 2025-02-05T21:40:41.249Z (over 1 year ago)
- Language: TypeScript
- Size: 150 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# native-x-form
[](https://github.com/semantic-release/semantic-release)
This component helps you add and manage form in react native
## Install
### Yarn
```sh
yarn add native-x-form
```
### NPM
```sh
npm install native-x-form
```
## Usage
```tsx
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 (
state={state} onSubmit={onSubmit}>
{({ submitForm }) => (
Submit
)}
)
}
```
Any component can be placed inside `FormItem` as long as the props are extended from `FormChildProp`
```tsx
export type AcceptableFormValue = string | boolean | number
type FormChildProp = {
value?: T
onChange?: (value: T) => void
onChangeText?: (value: T) => void
onBlur?: () => void
error?: string | Error | null
isLoading?: boolean
}
```
Sample implementation:
```tsx
import { FormChildProps } from 'native-x-form'
interface InputProps extends FormChildProps {
...
}
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` type
```tsx
export type Validator = (input: T) => string | undefined
```
The return value of `Validator` function must be the error message.
Few validator function creators are provided with this module.
```tsx
isEmpty(errorMessage: string): Validator
isInvalidEmail(errorMessage: string): Validator
isNonAlphaNumeric(errorMessage: string): Validator
```
## 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 |