npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-individual-character-input-boxes

v1.2.1

Published

Simple single character input boxes.

Downloads

2,285

Readme

react-individual-character-input-boxes

npm version Join the chat at https://gitter.im/single-character-input-boxes/Lobby

React Individual Character Input Boxes (RICIBs) are individual inputs that are separate from each other but functionally act similar as a regular input box. Motivation came from Apples similar input boxes used for their two-factor authorization: apple input boxes

Demo

You can view a demo of this component here!

Installation

$ npm i --save react-individual-character-input-boxes

How To Use

Import:

import RICIBs from 'react-individual-character-input-boxes';

Example code:

handleOutput (string) {
    // Do something with the string
  }

  render () {
    return (
      <div>
        <RICIBs
          amount={5}
          autoFocus
          handleOutputString={this.handleOutput}
          inputProps={[
            { className: "first-box" },
            { style: { "color": "orange" } },
            { placeholder: "_" }
          ]}
          inputRegExp={/^[0-9]$/}
        />
      </div>
    )
  }

Props:

| Prop | Type | Required | Description | | :--- | :--- | :---: | :--- | | amount | Number | | sets the number of input boxes. (default is 5) | | autoFocus | Boolean | | When true, the first input box will automatically be selected on page load. (default false) | | handleOutputString | Function | ✓ | Implement it to handle the string output of the module. | | inputProps | Object or Array<Object> | | Allows you to pass through properties to the input boxes. With this you can customize attributes (including styles) for all of the boxes by using an Object. To customize each box individually use an array of objects where each item in the array represents a box. | | inputRegExp | RegExp | | Tells the component which characters to allow as inputs. (default is /^[0-9]$/ which is only numbers) | | password | Boolean | | Masks in the input if set as true (default is false) |

Help, I cant get it to work or I want a feature!

Please feel free to submit an issue if you are running into trouble or have an idea for additional functionality!

BUG

I am aware that there is a bug (mostly seems to occur in Chrome) where if you type to quickly sometimes the selection will spazz out and jump between inputs. I think it is a browser bug, but if anybody has any idea how to possibly fix this let me know please!

License

MIT © Danny Radden