react-conform

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.