native-x-text-input

Input component for capturing text input from users.

Install

Yarn

yarn add native-x-text-input

NPM

npm install native-x-text-input

Usage

import { TextInput } from 'native-x-text-input'

function MyComponent() {
  return (
    <Stack>
      ...
      <TextInput
        label='Email'
        placeholder='Enter an email'
        rounded
        error='This input is not valid!'
      />
      ...
    </Stack>
  )
}

This component is compatible with native-x-form

import { TextInput } from 'native-x-text-input'
import { Form, FormInput } from 'native-x-form'

interface FormState {
  email?: string
}

function MyComponent() {
  const onChange = ({ state: { email }, isValid }: { state: FormState; isValid: boolean }) => {
    console.log({ email })
  }

  return (
    <Form<FormState> state={state} onChange={onChange}>
      ...
      <FormInput name='email' validators={[isInvalidEmail('This is invalid email!')]}>
        <TextInput label='Email' placeholder='Enter an email' rounded />
      </FormInput>
      ...
    </Form>
  )
}

API

| Property | Default Value | Usage | | --------------------------- | ------------- | ---------------------------------------------------------- | | label?: string | | Label for the input | | placeholder?: string | | Placeholder text for the text input | | multiline?: boolean | | Set true to allow more than one line for the input | | rounded?: boolean | false | Set true to use rounded corners | | error?: string | | Error message to show | | autoCapitalization?: string | | Valid values are: 'none', 'words' | | autoFocus?: boolean | | Set true to auto focus | | disabled?: boolean | | Set true to disable input | | password?: boolean | | Set true to use the input as secret input | | numberOfLines?: number | | Number of lines to allow | | icon?: ReactNode | | Icon component to render with in the component | | rightIcon?: ReactNode | | Icon component to render at the right end of the component | | fill?: boolean | | Set true to fill the container | | width?: number | | Width of the text input | | height?: number | | Height of the text input | | errorColor?: string | 'error' | One of the colors specified by theme provider |

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 |