Skip to main content

Nuts Selector

v.2.0.3

Installation​

yarn add @mercell/nuts-selector-react

Usage​

Nuts Selector component is based on the Dropdown component.

You can pass all the props allowed in Dropdown component plus special once for Nuts Selector. Component has a connection to the backend which is available here

import { NutsSelector } from '@mercell/nuts-selector-react';
Live Editor
Result

Types, definitions, etc.​

NutsSelectorProps
interface NutsSelectorProps {
    onChangeCallback: (selectedCodes: string | string[]) => void;
    priorityCountryAbbr?: string;
    disableTopLevelNuts?: boolean;
    disableAllButNUTS3?: boolean;
    selfDisableComponentIfNoValues?: boolean;
} & JSX.IntrinsicElements['div'] & Omit<DropdownProps, 'filterOption'>
NameTypeDefaultRequiredDescription
onChangeCallbackboolean-yesCallback function where as param you receive selected value or array if you have isMulti flag set to true
priorityCountryAbbrstring (country ISO2 or ISO3 only allowed)-noCountry abbr. in ISO2 or ISO3 format to filter out only nuts based on the country
disableTopLevelNutsboolean-noDisable selection of top-level nuts
disableAllButNUTS3boolean-noDisable selection all but NUTS3 level
selfDisableComponentIfNoValuesboolean-noSelf disabled whole field if nothing to choose
Rest of the React-Select propsStateManagerProps-noAll possible properties based on the React-Select documentation, e.g. isMulti, isClearable, hideSelectedOptions, options etc.