react-conform v0.1.0

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.