Skip to main content

CPV Selector

v.3.0.1

Installation​

yarn add @mercell/cpv-selector-react

Usage​

Using the CPV Selector component is as simple as importing it like this.

import { CPVSelector } from '@mercell/cpv-selector-react';
Live Editor
Result

Types, definitions, etc.​

CPVProps
interface CPVProps {
    isCPVPickerOpen: boolean;
    onCloseCPVPickerCallback: () => void;
    title?: string;
    language?: string;
    noCodesFoundText?: string;
    selectedCodesText?: string;
    onCPVListChange: (selectedCPVs: string[]) => void;
    selectedCPVs?: string[];
    disabledCPVs?: string[];
    ariaExpandChevronLabel?: string;
    ariaCollapseChevronLabel?: string;
    cpvSearchPlaceholder?: string;
    ariaLabelClearSearch?: string;
    modalProps?: Omit<ModalProps, 'isModalVisible' | 'onCloseCallback'> &JSX.IntrinsicElements['div'];
    allowToSelectOnlyOne?: boolean;
} & JSX.IntrinsicElements['div']
NameTypeDefaultRequiredDescription
isCPVPickerOpenbooleanfalseyesStatus boolean which is necessary to show/hide cpv selector
onCloseCPVPickerCallback() => void-yesCallback method to close cpv selector
titlestringSelect categoriesnoTitle of the modal
languagestringennoCPV langauge
noCodesFoundTextstringCouldn’t find any results matching your searchnoText where search function could not find any match
selectedCodesTextstringSelected codesnoText near counter
onCPVListChange(selectedCPVsData: string[]) => void-yesFunction to catch any change of codes based on user action
selectedCPVsstring[]-noInitial codes which can be selected by default
disabledIdsstring[]-noInitial codes which should be disabled
ariaExpandChevronLabelstringExpandnoExpand text for aria-label
ariaCollapseChevronLabelstringCollapsenoCollapse text for aria-label
cpvSearchPlaceholderstringCPV SearchnoSearch placeholder text
ariaLabelClearSearchstringClear searchnoClear search text for aria-label
modalPropsModalProps{}noPass through props for Modal
allowToSelectOnlyOnebooleanfalsenoSwitch from checkbox to radio for code selection