Socket
Socket
Sign inDemoInstall

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

Package Overview
Dependencies
45
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

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.


Version published
Maintainers
1
Weekly downloads
1,722
increased by8.44%

Weekly downloads

Readme

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

Last updated on 11 Oct 2022

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