Easyfill

A simple React component for autofilling popular email suffixes.

Install

npm i easyfill

Usage

function CoolReactComponent() {
    const handleAdd = (itemAdded) => {
        console.log(itemAdded);
    }

    const handleAdd = (allItemsAdded) => {
        console.log(allItemsAdded);
    }

    const handleValidation = (itemToValidate) => {
        if (itemToValidate.length > 5) {
            return true
        } else {
            return false
        }
    }

    return(
        <Easyfill
            max={10}
            onAdd={handleAdd}
            onComplete={handleComplete}
            validation={handleValidation}
            progress
        />
    )
}

API Reference

max

  max={count}

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | count | number | Max entries to allow. |

onChange

  onAdd={handleOnChange}

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | handleOnChange | function | Function to call when validated items change. |

onComplete

  onComplete={handleOnComplete}

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | handleOnComplete | function | Function to call when validated item count reaches max. |

validation

  validation={handleValidation}

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | validation | function | Custom validation function that takes the input to be added, and returns a boolean. |

progress

  progress={showProgress}

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | showProgress | boolean | Boolean that will show/hide progress bar in bottom left. |

Authors

• @technicaldebt