react-conform

0.1.0 • Public • Published

react-conform

Travis Coverage Status

Component for allowing only a certain type to be inputted into a textbox. Demo coming soon.

Supported right now:

  • Integer only
  • Float (Integer but a single decimal allowed)
  • String (any)

Why? Out of need for having numeric-only inputs with support for IE9 which does not support input[type=number].

Installation

yarn add react-conform or npm i --save react-conform

<Input />

Usage

import React from 'react'
import { Input } from 'react-conform'
 
class Form extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
            value: ''
        };
 
        this._onChange = this._onChange.bind(this);
    }
    
    _onChange(value, event) {
        // We get event as the second arg because of the prop 'sendEvent'
        console.log(event);
        this.setState({
            value // Value is the string value of what is being entered
        });
    }
 
    render() {
        return (
            <form>
                <label htmlFor="age">How old are you?</label>
                <Input 
                    name="age"
                    id="age"
                    onChange={this._onChange}
                    value={this.state.value}
                    integer
                    sendEvent
                />
            </form>
        );
    }
}

Props

  • integer: bool

If you want your input to only accept an integer value. No decimals/symbols/letters allowed. Negative values allowed by default.

  • float: bool

If you want your input to only accept a float value. Decimals allowed. No symbols/letters allowed. Negative values allowed by default.

  • positive: bool

Used in conjuction with integer or float. Does not allow the '-' sign to be entered.

  • allowEuler: bool

Used in conjuction with integer or float. Allows an e to be entered in the input. E.g. 1e25.

  • onChange: func

Called when the input is changed. Returns a string of the value being entered.

  • sendEvent: bool

When present, onChange sends the javascript event as the second argument.

  • value: string

The string value of what is in the input.

Readme

Keywords

Package Sidebar

Install

npm i react-conform

Weekly Downloads

1

Version

0.1.0

License

GPL-3.0

Last publish

Collaborators

  • nehero