https://github.com/mdbootstrap/react-select-with-custom-input

Responsive React Select with custom user input built with Bootstrap 5. Click on the Other option to input a custom value into the select.
https://github.com/mdbootstrap/react-select-with-custom-input

bootstrap bootstrap-input bootstrap-react bootstrap-select bootstrap-template bootstrap-theme bootstrap5 css jsx react react-input react-select

Last synced: 4 days ago
JSON representation

Responsive React Select with custom user input built with Bootstrap 5. Click on the Other option to input a custom value into the select.

• Host: GitHub
• URL: https://github.com/mdbootstrap/react-select-with-custom-input
• Owner: mdbootstrap
• Created: 2022-08-24T07:49:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-24T08:17:15.000Z (over 2 years ago)
• Last Synced: 2024-12-15T07:48:18.078Z (26 days ago)
• Topics: bootstrap, bootstrap-input, bootstrap-react, bootstrap-select, bootstrap-template, bootstrap-theme, bootstrap5, css, jsx, react, react-input, react-select
• Homepage: https://mdbootstrap.com/docs/react/extended/select-with-custom-input/
• Size: 9.77 KB
• Stars: 0
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Responsive React Select with custom user input built with Bootstrap 5. Click on the Other option to input a custom value into the select.

Check out [React Bootstrap Select With Custom Input Documentation](https://mdbootstrap.com/docs/react/extended/select-with-custom-input/) for detailed instructions & even more examples.

## Basic example

![React Bootstrap 5 Select With Custom Input](/assets/basic.png)

```js

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";

import { MDBContainer, MDBInput, MDBSelect } from "mdb-react-ui-kit";

export default function App() {

  const data = useMemo(

    () => [

      { text: "One", value: 1 },

      { text: "Two", value: 2 },

      { text: "Three", value: 3 },

      { text: "Four", value: 4 },

      { text: "Other", value: 5 },

    ],

    []

  );

  const [currentValue, setCurrentValue] = useState(data[0]);

  const [inputActive, setInputActive] = useState(false);

  const otherInputEl = useRef(null);

  const inputOnBlur = useCallback((e) => {

    if (!e.target.value) {

      setInputActive(false);

      setCurrentValue(data[data.length - 1])

    }

  }, []);

  useEffect(() => {

    console.log(currentValue);

    const lastIndex = data.length - 1;

    if (currentValue.value == data[lastIndex].value) {

      setInputActive(true);

      setTimeout(() => {

        otherInputEl.current?.focus();

      });

    } else {

      setInputActive(false);

    }

  }, [currentValue]);

  return (

    

      {inputActive ? (

        

      ) : (

         setCurrentValue(e)}

          label="Example label"

          data={data}

        />

      )}

    

  );

}

```

## How to use?

1. Download MDB React - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

___

## More extended Bootstrap documentation



React multiselect

React select

React forms

React input fields