Socket
Socket
Sign inDemoInstall

native-x-text-input

Package Overview
Dependencies
5
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    native-x-text-input

Text input component


Version published
Maintainers
1
Install size
63.9 MB
Created

Readme

Source

native-x-text-input

semantic-release

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

PropertyDefault ValueUsage
label?: stringLabel for the input
placeholder?: stringPlaceholder text for the text input
multiline?: booleanSet true to allow more than one line for the input
rounded?: booleanfalseSet true to use rounded corners
error?: stringError message to show
autoCapitalization?: stringValid values are: 'none', 'words'
autoFocus?: booleanSet true to auto focus
disabled?: booleanSet true to disable input
password?: booleanSet true to use the input as secret input
numberOfLines?: numberNumber of lines to allow
icon?: ReactNodeIcon component to render with in the component
rightIcon?: ReactNodeIcon component to render at the right end of the component
fill?: booleanSet true to fill the container
width?: numberWidth of the text input
height?: numberHeight 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 messageRelease 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

FAQs

Last updated on 27 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc