react-input-material

Project status

Use case

Reusable material design based input field with support for (richt-)text, code, selections, numbers, dates and so on.

Content

Installation

You can install via package manager or simply download the compiled version as zip file here and inject:

npm install react-input-material

import {
    TextInput, FileInput, Checkbox, Inputs, Interval
} from 'react-input-material'

// ...

Examples

Simple uncontrolled input

const Application = () =>
    <TextInput<string>
        name="simpleInput"
        onChange={({value, invalid}) => {
            console.log('Set value', value)
            if (invalid)
                console.log('Value is invalid!')
        }}
    />

Simple controlled one

const Application = () => {
    const [value, setValue] = useState<null | string>(null)

    return <TextInput<null | string>
        name = "simpleInputControlled"
        onChangeValue = {setValue}
        value = {value}
    />
}

Number example

const Application = () =>
    <TextInput<number>
        declaration="Number"
        description="Place a number please."
        name="number"
        placeholder="100000"

        maximum={200000}
        minimum={10}
        required
        type="number"
    />

Code editor example

const Application = () =>
    <TextInput<string>
        className="text-input--code-editor"

        editor="code(js)"
        rows={6}
        
        initialValue="const value = 2"
    />

Complex rich text input

const Application = () =>
    <TextInput<string>
        className="text-input--richtext-editor"

        declaration="richtext"
        description="Please your styled text here."
        name="RichText"
        placeholder="Hello Mr. Smith,<br><br>this is a Placeholder."
        
        editor="richtext"
        rows={6}
        selectableEditor
        
        initialValue="Hello Mr. Smith,<br><br>how are you?"
        minimumLength={10}
        maximumLength={100}
        required

        onChangeValue={(value) => {
            console.log('Current value is', value)
        }}
    />

Universal Date input

const Application = () =>
    <TextInput<number>
        default={
            new Date('2025-01-01T00:00:00.000Z')
                .getTime() / 1000
        }
        name="timeInput"
        type="date"
    />

Local date input

const Application = () =>
    <TextInput<number>
        default="2025-01-01T23:00:00.000Z"
        name="timeInput"
        type="date-local"
    />

Select an input

const Application = () =>
    <TextInput<string>
        declaration="Selection Example"
        name="Example selection"
        selection={['A', 'B', 'C']}
    />

Select an input with mapped labels

const Application = () =>
    <TextInput<string>
        name="Another selection example"
        required
        selection={[
            {value: 'A', label: 'a'},
            {value: 'B', label: 'b'},
            {value: 'C', label: 'c'}
        ]}
    />

You can select and upload files

const Application = () =>
    <FileInput name="fileInput" />

Checkbox

const Application = () => <Checkbox />

List of any inputs are possible

const Application = () =>
    <Inputs<boolean | null, CheckboxProps>
        name="checkboxInputs"
        default={[{
            type: 'boolean',
            value: false,
            required: true,
            showInitialValidationState: true
        }]}

        createItem={useMemorizedValue(({
            index, item, properties: {name}
        }: CreateItemOptions<
            boolean | null,
            CheckboxProps,
            InputsProperties<boolean | null, CheckboxProps>
        >): CheckboxProps => ({
            ...item,
            name: `${name}-${String(index + 1)}`
        }))}

        maximumNumber={2}
        minimumNumber={2}
 
        showInitialValidationState
    >
        {({properties}) => <Checkbox {...properties} />}
    </Inputs>

Interval

const Application = () =>
    <Interval
        name="Interval example"
        required
        step={60}
        value={{
            start: {default: 120, maximum: 3600},
            end: {default: 240, minimum: 120}
        }}
    />