Jb-select-react NPM

jb-select-react

select component for react

installation

run npm install jb-select-react to install package with npm

usage

use below syntax in your render function.

<JBSelect></JBSelect>

label

use label property to describe your select component.

<JBSelect label='your label name' ></JBSelect>

option value

set an array object. example:

render(){
    const obj = [{name:'reza',family:'asadi',userId:1},{name:'peter',family:'peterson',userId:2}];
    getOptionTitle:(option)=>{
        return `${option.name} ${option.family}`;
    },
    getOptionValue:(option)=>{
        return option.userId;
    }
    return(
        <JBSelect label='your label name' optionList={obj} getOptionTitle={getOptionTitle} getOptionValue={getOptionValue}></JBSelect>;
    );
}

Add Icon or Any Element into box

sometimes you want to add icon into the select box before value box. you can customize this entire section by adding a div or any other Tag with the slot="start-section"

like the example the below:

<JBSelect>
    <div slot="start-section">
        <img class="your-custom-icon" src="./path/to/file.svg">
    </div>
</JBSelect>

set custom style

in some cases in your | css variable name | ------------- | --jb-select-margin | --jb-select-width | --jb-select-border-radius | --jb-select-border-color | --jb-select-border-color-selected | --jb-select-bgcolor | --jb-select-overlay-bgcolor | --jb-select-list-max-height | --jb-select-border-bottom-width | --jb-select-border-width | --jb-select-label-color | --jb-input-label-font-size | --jb-input-label-font-weight | --jb-select-option-color | --jb-select-option-color-hover | --jb-select-option-background-color | --jb-select-option-background-color-hover | --jb-select-input-color | --jb-select-bgcolor-selected | --jb-select-selected-value-color | --jb-select-selected-value-font-size | --jb-select-message-color | --jb-select-message-font-size | --jb-select-message-font-weight | --jb-select-placeholder-color | --jb-select-placeholder-font-size | --jb-select-height | --jb-select-mobile-search-input-height | --jb-select-mobile-item-list-margin | --jb-select-list-padding | --jb-select-close-bg-color | --jb-select-close-x-color | --jb-select-close-bg-opacity | --jb-select-mobile-input-bgcolor | --jb-select-mobile-search-border-width | --jb-select-mobile-search-border-color | --jb-select-mobile-search-bor | --jb-select-mobile-search-bor | --jb-select-mobile-search-border-radius | --jb-select-middle-div-height | --jb-select-middle-div-color | --jb-select-middle-div-margin | --jb-select-middle-div-mobile-margin | --jb-select-middle-div-radius | --jb-select-list-scroll-color | --jb-select-list-scroll-border-radius | --jb-select-select-box-margin project you need to change defualt style of the component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this component all you need is to set css variable. | description | | ------------- | | web-component margin default is 0 0 | | change the select component width default is 100% | | web-component border-radius defualt is 16px | | border color of select in normal mode | | border color when user select a value from list | | background color of input | | background of select overlay when open in mobile and tablet screen | | max height of option list | | width of border bottom | | width of border | | color of label default is #1f1735 | | label font size default is 0.8em | | color of label defualt is #1f1735 | | change option text color | | change option text color on hover | | background of options default is transparent | | background of options on mouse hover default is #1073db | | color of input value | | set background color for selected status | | selected value text color default is #1f1735 | | font-size of selected value default is 1.1rem | | message text color default is #929292 | | font size of message default is 0.7em | | font weight of message box default is normal | | placeholder color default is initial | | placeholder font-size default is 1.1em | | jb-select box height | | when user open select on mobile there is a search box input this var will set its height | | when user open select on mobile there is gap between search box & list that can be customized | | padding of opened list box default is 16px 0 | | close button bg-color default is #1f1735 | | close button x color default is #fff | | close button bg opacity default is 0.4 | | background color search input when open in mobile | | when user open select on mobile, search box can have its own border width config | | when user open select on mobile, search box can have its own border color config | der-bottom-width | when user open select on mobile, search box can have its own border bottom width config | der-bottom-color | when user open select on mobile, search box can have its own border bottom color config | | when user open select on mobile, search box can have its own border radius | | separator line between input and list default is 0px and hidden but you can cahange it | | change separator line color | | chnage seprator line margin | | chnage seprator line margin in mobile modal | | change seperator line border-radius | | list item scroll color default is #c3c3c3 | | list item scroll border-radius default is 4px | | margin of internal element called select box that wrapper display element of form in one box |