Naughty Programmer's Madness

    react-inputs-x

    1.1.0 • Public • Published

    React Inputs X

    An awesome react input component.

    Demo

    https://dnkodi.github.io/react-inputs-x/

    Installation

    $ npm install react-inputs-x --save

    After this you can import react-inputs-x and its styles in your application as follows:

    import { Input, InputNumber, InputPassword } from 'react-inputs-x';
     
    //Include styles at your root and make sure you have necessary loaders to handle css
    import 'react-inputs-x/dist/styles.css';

    Usage

    import React from 'react';
    import { Input, InputNumber, InputPassword } from 'react-inputs-x';
     
    class App extends React.Component {
        state = {
            age: "",
            currency: "",
            firstname: "",
            password: ""
        }
     
        handleChange = (field) => (value) => this.setState({ [field]: value })
     
        render() {
            const { firstname, age, currency, password } = this.state;
     
            return (
            <div>
                <h3>Text Input</h3>
                <Input
                    label="First Name"
                    onChange={this.handleChange("firstname")}
                    placeholder="Enter first name"
                    required
                    value={firstname}
                    width="200px"
                />
                <h3>Number Input</h3>
                <InputNumber
                    id="age"
                    label="Age (required)"
                    max={1000}
                    min={0}
                    onChange={this.handleChange("age")}
                    pattern={/^[0-9]{0,4}$/}
                    placeholder="Age"
                    required
                    value={age}
                    width="200px"
                />
                <h3>Number Input — With Buttons</h3>
                <InputNumber
                    buttons
                    id="currencyInput"
                    label="Currency (required)"
                    max={1000}
                    min={-2}
                    onChange={this.handleChange("currency")}
                    pattern={/^\-?\d*\.?\d{0,2}$/}
                    required
                    value={currency}
                    width="200px"
                />
                <h3>Password Input</h3>
                <InputPassword
                    label="Password"
                    onChange={this.handleChange("password")}
                    placeholder="Enter password"
                    value={password}
                    width="200px"
                />
            </div>
            );
        }
    }

    Development

    $ git clone https://github.com/dnkodi/react-inputs-x.git
    $ npm install

    Start the dev server

    $ npm start

    Defaults to port 8080.

    License

    MIT Licensed. Copyright (c) Duleep Kodithuwakku 2019.

    Install

    npm i react-inputs-x

    DownloadsWeekly Downloads

    4

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    36.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • dnkodi