Input

v.1.0.6

Installation

yarn

yarn add @mercell/input-dropdown-react

pnpm

pnpm add @mercell/input-dropdown-react

npm

npm install --save @mercell/input-dropdown-react

The Input-dropdown has necessary peerDependencies, please make sure that you have them in your project

"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2",
"@mercell/input-react": "^3.0.1",
"@mercell/dropdown-react": "^2.0.3",
"@mercell/use-window-resize-react-hook": "^0.0.6"

Usage

Using the Input dropdown component is as simple as importing it like this.

import { InputDropdown } from '@mercell/input-dropdown-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const InputWrapper = () => { const pinnedCountries = [ { value: '+47', label: 'NO (+47)' }, { value: '+46', label: 'SE (+46)' }, ]; const options = [ { value: '+40', label: 'XX (+40)' }, { value: '+41', label: 'YY (+41)' }, { value: '+42', label: 'ZZ (+4222)' }, { value: '+47', label: 'NO (+47)' }, { value: '+46', label: 'SE (+46)' }, { value: '+45', label: 'DK (+45)' }, ]; const [inputDropdownValues, setValues] = React.useState<{ inputValue: string; dropdownValue: any; }>({ inputValue: '', dropdownValue: options[1] }); const [inputDropdownValues2, setValues2] = React.useState<{ inputValue: string; dropdownValue: any; }>({ inputValue: '', dropdownValue: options[3] }); return ( <div className="space-y-4 h-96"> <InputDropdown dropdownProps={{ placeholder: 'XX (+YY)' }} selectedOptions={inputDropdownValues.dropdownValue} inputValue={inputDropdownValues.inputValue} pinnedOptions={pinnedCountries} dropdownOptions={options} onChangeInputDropdown={(inputValue, dropdownValue) => setValues({ inputValue, dropdownValue }) } /> <InputDropdown dropdownProps={{ placeholder: 'XX (+YY)' }} dropdownSide="right" pinnedOptions={pinnedCountries} dropdownOptions={options} onChangeInputDropdown={(inputValue, dropdownValue) => setValues2({ inputValue, dropdownValue }) } inputValue={inputDropdownValues2.inputValue} selectedOptions={inputDropdownValues2.dropdownValue} /> </div> ) } render(<InputWrapper />)

// You can play with code, with HTML tags and text as much as you want!
    const InputWrapper = () => {
        const pinnedCountries = [
            { value: '+47', label: 'NO (+47)' },
            { value: '+46', label: 'SE (+46)' },
        ];
        const options = [
            { value: '+40', label: 'XX (+40)' },
            { value: '+41', label: 'YY (+41)' },
            { value: '+42', label: 'ZZ (+4222)' },
            { value: '+47', label: 'NO (+47)' },
            { value: '+46', label: 'SE (+46)' },
            { value: '+45', label: 'DK (+45)' },
        ];
        const [inputDropdownValues, setValues] = React.useState<{
            inputValue: string;
            dropdownValue: any;
        }>({ inputValue: '', dropdownValue: options[1] });
        const [inputDropdownValues2, setValues2] = React.useState<{
            inputValue: string;
            dropdownValue: any;
        }>({ inputValue: '', dropdownValue: options[3] });
        return (
            <div className="space-y-4 h-96">
                <InputDropdown
                    dropdownProps={{ placeholder: 'XX (+YY)' }}
                    selectedOptions={inputDropdownValues.dropdownValue}
                    inputValue={inputDropdownValues.inputValue}
                    pinnedOptions={pinnedCountries}
                    dropdownOptions={options}
                    onChangeInputDropdown={(inputValue, dropdownValue) =>
                        setValues({ inputValue, dropdownValue })
                    }
                />
                 <InputDropdown
                dropdownProps={{ placeholder: 'XX (+YY)' }}
                dropdownSide="right"
                pinnedOptions={pinnedCountries}
                dropdownOptions={options}
                onChangeInputDropdown={(inputValue, dropdownValue) =>
                    setValues2({ inputValue, dropdownValue })
                }
                inputValue={inputDropdownValues2.inputValue}
                selectedOptions={inputDropdownValues2.dropdownValue}
            />
            </div>
        )
    }
    render(<InputWrapper />)

Result

Types, definitions, etc.

Types

InputDropdownProps

export interface InputDropdownProps {
    onChangeInputDropdown: (
        inputValue: string,
        dropdownValue: DropdownProps['value']
    ) => void;
    selectedOptions: DropdownProps['value'];
    pinnedOptions?: DropdownProps['options'];
    inputValue: string;
    dropdownSide?: 'left' | 'right';
    dropdownOptions: DropdownProps['options'];
    inputProps?: Omit<JSX.IntrinsicElements['input'], 'ref'> &
        MutableRefObject<HTMLInputElement>;
    inputElementProps?: Omit<JSX.IntrinsicElements['span'], 'ref'> &
        MutableRefObject<HTMLSpanElement>;
    inputContainerProps?: JSX.IntrinsicElements['div'];
    dropdownProps?: Omit<DropdownProps, 'options' | 'value'>;
    disabled?: boolean;
    invalid?: boolean;
    dropdownMaxWidth?: string
}

Name	Type	Default	Required	Description
onChangeInputDropdown	function (inputValue: string, dropdownValue: DropdownProps['value'])	-	yes	The input and dropdown elements onChange
selectedOptions	DropdownProps['value']	null	yes	The selected option in dropdown
pinnedOptions	DropdownProps['options']	-	no	Array of pinned options
inputValue	string	''	yes	The value in input
dropdownSide	'left' | 'right';	left	no	Which side of the input the dropdown should display
dropdownOptions	DropdownProps['options']	-	yes	Options in the dropdown
inputProps		-	no	Properties for the input
inputElementProps		-	no	Properties for the input element
inputContainerProps	JSX.IntrinsicElements['div']	-	no	Properties for the input container
dropdownProps	Omit<DropdownProps, 'options' | 'value'>	-	no	Properties for the dropdown
disabled	boolean	false	no	Set field disabled
invalid	boolean	false	no	Set field invalid
dropdownMaxWidth	string	'170px'	no	Set max width for dropdown container

Changelog

Change Log - @mercell/input-dropdown-react

This log was last generated on Wed, 01 Mar 2023 11:03:15 GMT and should not be manually modified.

1.0.6

Wed, 01 Mar 2023 11:03:15 GMT

Patches

• Change how name of the dropdown in inputDropdown is created

1.0.5

Tue, 17 Jan 2023 11:08:41 GMT

Patches

• Add property to set max width of the dropdown container

1.0.4

Fri, 16 Dec 2022 12:59:24 GMT

Patches

• Prevent using isMulti in component for now

1.0.3

Fri, 25 Nov 2022 08:14:58 GMT

Patches

• Fix in design

1.0.2

Fri, 11 Nov 2022 09:18:57 GMT

Patches

• Add new necessary library

1.0.1

Thu, 03 Nov 2022 13:55:46 GMT

Patches

• Updated to add conditional style for right-alligned dropdown menu. Fixes small style issue

1.0.0

Tue, 25 Oct 2022 10:31:44 GMT

Breaking changes

• New component with a dropdown inside the input field. First initial version

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card