Skip to main content

SelectDialog

Select components are used for collecting user provided information from a list of options.

info

This Component is built on top of basic HTMLSelectElement select and you can pass all the props and attributes which you can pass to basic select element.

Example​


import { SelectDialog , RepopupProvider } from 'repopup'
import  { useState } from 'react';
import ReactDOM from 'react-dom';

function App() {
   const [open,setOpen] = useState(false)

  const submitCallback = (value) => {
    console.log(value)
  }
  
  return <>
        <Button onClick={() => setOpen(true)}>Open Input</Button>
        <SelectDialog
                label="Football Mania"
                inputOptions={inputOptions}
                onSubmitCallback={submitCallback}
                onClose={() => setOpen(false)}
                open={open}
                placeholder="Select anything..."
            />
  </>
}

ReactDOM.render(
   <RepopupProvider>
    <App />
</RepopupProvider>, 
,document.querySelector('#app'));

onSubmitCallback​

note

Here onSubmitCallback is very important prop which will have the value of the option which user has choosen as a parameter. So with help of this you will be able to access this value and do further process.


  const submitCallback = (value) => {
    console.log(value)
  }

inputOptions​

Here inputOptions prop is also important prop. With this prop you will provide the options to SelectDialog component. And its type is InputOptionsType. And below is type definitions of this InputOptionsType interface


interface OptGroup {
    [key: string | number]: string;
}

interface InputOptionsType {
    [key: string | number]: OptGroup | string;
}


So , for above example the inputOptions are as below This will help you understand how you can provide inputOptions to your SelectDialog component.


    const inputOptions = {
        Sports:
            {
                football: 'Foolball',
                cricket: 'Cricket',
                badminton: 'Badminton',
                basketball: 'Basketball'
            },
        Players:
            {
                messi: 'Messi',
                ronaldo: 'Ronaldo',
                lewandowski: 'Lewandowski'
            },
        ucl: 'Champions League'
    };

note

So from above example we can say that , for inputOptions object, we can pass two types of pairs to it

  • a key:value pair with key as number | string and value as string

const inputOptions = {
    ucl: 'Champions League'
}

  • a key:Object pair with key as number | string and value as Object with its key as number | string and value as string

const inputOptions = {
    Players:
        {
            messi: 'Messi',
            ronaldo: 'Ronaldo',
            lewandowski: 'Lewandowski'
        }
}

API​