react-material-selectable-textinput

Material-ui textInput component that allow choose between several options and add more by writing and adding.

You can see a demo (here)[https://adrianfdez469.github.io/demo-material-selectable-input/] and the code of the demo (hete)[https://github.com/adrianfdez469/demo-material-selectable-input]

Code Example

import React from "react";
import InputSelect from "react-material-selectable-inputtext";

export default () => {
    const [allCountries, setAllCountries] = React.useState([]);
    const [selected, setSelected] = React.useState([]);

    // Populating all countries
    React.useEffect(() => {
        (async () => {
            const countriesResp = await fetch("https://restcountries.eu/rest/v2/all");
            if (countriesResp.ok) {
                const countries = await countriesResp.json();
                const mappedCountries = countries.map((c) => {
                    return { id: c.name, text: c.name, population: c.population };
                });
                setAllCountries(mappedCountries);
            }
        })();
    }, []);

    const onAddHandler = (item) => {
        // Add more logic if you want
        setSelected([...selected, item]);
    };

    return (
        <div style={{ margin: "20px", fontSize: "20px" }}>
            <InputSelect
                optionsList={allCountries}
                excludedOptions={selected}
                onAdd={onAddHandler}
                textFieldProps={{
                    variant: "outlined",
                }}
            />
            {selected.map((item) => (
                <div
                    key={item.text}
                >{`Country: ${item.text} |  Population: ${item.population}`}</div>
            ))}
        </div>
    );
};

Motivation

This package arises from the non-existence in the material-ui library of a component that will merge the functionalities of TextField and Select into one single component. With this package you can have a TextField with the Select functionality. While you type on it, you can see and select one of the available options that pop up. It uses the material-ui (TextField)[https://material-ui.com/es/components/text-fields/] component, so it behaves as one.

Instalation

Pre-requisitos

Before yo use this pacakge be awere that it needs @material-ui/core@^4.11.3 and @material-ui/icons@^4.11.2 to work properly.

npm install @material-ui/core @material-ui/icons or yarn add @material-ui/core @material-ui/icons

Install

npm install react-material-selectable-inputtext or yarn add react-material-selectable-inputtext

API Reference

Types of props are important, be aware that the types that are passed to optionsList and excludedOptions must be array of objects with the shape of:

[
    {
        id: "id1",
        text: "Text to show",
        // any other properties you want
    },
];

Prop	Type *	Required	Description
optionsList	{ id: string, text: string }[]	true	Should contain the full list of posibles items to show for select
excludedOptions	{ id: text, text: string }[]	false	Should contain the items that you dont want to show anymore, could be the list of previous selected items.
onAdd	(item: {id: string, text: string}) => void	false	Callback function to run when an item is added.
textFieldProps	TextFieldProps from @material-ui/core lib	false	Object that recieves any property of the TextField component of @material-ui/core/TextField.

Creator

• Adrián Fernández Martínez - adrianfdez469

License

This project is under MIT License - look the file LICENSE.md for more details.

Contributing 🖇️

Please read the CONTRIBUTING.md for more details of our conduct code, and the proccess to send pull requests.

Expressions of Gratitude 🎁

• Tell others about this project 📢
• Invite someone on the team to have a beer 🍺 or coffee ☕ or a coffe.
• Give thanks publicly 🤓.

---

⌨️ with ❤️ by adrianfdez469 😊