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-restricted-input

v1.0.3

Published

Restrict text inputs to only accept certain characters.

Downloads

9

Readme

React Restricted Input

Use any regex you want to restrict the characters that can be entered into an text input.

Why do I need this?

While preventing illegal characters from being entered into a text input is traditionally a fairly straightforward task in JavaScript, the way React manages user interaction with inputs causes the carat to jump to the end of the input field if your code does not allow the field to update. This package solves this problem in the following way:

  1. Caches and then restores the carat position if the caracter entered matches the given regex restriction.
  2. Temporarily hides the carat to make #1 invisible to the user. Without hiding the carat, the user would see it jump to the end and then back. Hiding the carat is achieved by temporarily setting the text color to transparent. This causes the text in the input field to briefly flicker, but one could argue that this is actually good UX because it indicates to the user that their keypress was indeed registered. An alternative approach to hiding the carat could be to briefly clone and hide the element, thus eliminating the text flicker. But this package doesn't do that :)

Installation

npm install --save react-restricted-input

Usage

The following example creates a reusable component that only allows positive integers to be entered. See the examples folder for a working demo.

import RestrictedInput from 'react-restricted-input'

const PositiveIntegerInput = props => (
    <RestrictedInput 
        illegal={/\D/g}
        {...props}
    />
)

const MyStatefulComponent = React.createClass({
    getInitialState: function() {
        return { inputValue: '' }
    },

    onChange: function(e) {
        this.setState({ inputValue: e.target.value })
    },

    render: function() {
        return  <PositiveIntegerInput 
                    value={this.state.inputValue}
                    onChange={this.onChange}
                    placeholder='Positive integers only'
                />
    }
})