useSelect

The useSelect hook returns the SelectComponent component to render the Select and openSelectDialog function to open the SelectComponent programatically.

Importing the hook

import { useSelect } from 'repopup';

Usage

Football ManiaChoose your optionFoolballCricketBadmintonBasketballMessiRonaldoLewandowskiChampions League

import React from 'react';
import { useSelect , RepopupProvider } from 'repopup';
import ReactDOM from 'react-dom';


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

const App = () => {
    const { SelectComponent: SelectDialog, openSelectDialog } = useSelect({
        onSubmitCallback: (val: any) => console.log(val),
        inputOptions,
        label: 'Football Mania'
    });
    return (
        <React.Fragment>
            <Button onClick={() => openSelectDialog()}>Open</Button>
            <SelectDialog placeholder="Choose your option" />
        </React.Fragment>
    );
};

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

tip

Now , here to understand how can we pass the inputOptions to our useSelect hook, ypu can visit here , where it has been explained in detail.

Function Signature

function useSelect(
  options: UseSelectArgs,
): {SelectComponent:JSX.Element,openSelectDialog: () => void}

Options

Option	Type	Description	Default
closeOnBackdropClick	boolean	Wheather or not to close the popup on clicking the backdrop	true
title	string	Used for the title of the popup
cancelButtonText	string	Use this to change the text on the "Cancel"-button.	'Cancel'
onSubmitCallback	(value: any) => void;	Function that will be run when the "Submit"-button is clicked
submitButtonText	string	Use this to change the text on the "Submit"-button.	'Submit'
label	string	Used to give a label to the select field
inputOptions	InputOptionsType	options for the Select dailog component	{}