🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@s-ui/react-atom-pin-input

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@s-ui/react-atom-pin-input

PinInput is a component that handles the use of a code input in diferent input boxes, creating a beautiful visual effect for the user and providing an easy way to handle the code for the developer.

1.11.0
latest
Source
npm
Version published
Maintainers
1
Created
Source

PinInput

PinInput is a component that handles the use of a code input in diferent input boxes, creating a beautiful visual effect for the user and providing an easy way to handle the code for the developer.

Installation

$ npm install @s-ui/react-atom-pin-input

Usage

import PinInput, {PinInputField} from '@s-ui/react-atom-pin-input'

return (
  <div>
    <PinInput onChange={onChangeHandler} defaultValue={code} />
  </div>
)

Basic usage

<PinInput onChange={onChangeHandler} defaultValue={code} />

Placeholder usage

<PinInput placeholder="A" onChange={onChangeHandler} defaultValue={code} />

Password filter usage

<PinInput isPassword onChange={onChangeHandler} defaultValue={code} />

Sizes usage

<PinInput size="medium" onChange={onChangeHandler} defaultValue={code} />

Length usage

<PinInput lenth={6} onChange={onChangeHandler} defaultValue={code} />

Mask usage

<PinInput mask="NUMBER" onChange={onChangeHandler} defaultValue={code} />

Disabled usage

<PinInput disabled onChange={onChangeHandler} defaultValue={code} />

Status usage

<PinInput status="error" onChange={onChangeHandler} defaultValue={code} />

Children usage

<PinInput onChange={onChangeHandler} defaultValue={code}>
  -
</PinInput>

Import the styles (Sass)

@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-atom-pin-input/lib/index';

Find full description and more examples in the demo page.

FAQs

Package last updated on 11 Oct 2022

Did you know?

Socket

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