jb-select-react

[!WARNING]
this package is deprecated and moved to 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 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. | css variable name | description | | ------------- | ------------- | | --jb-select-margin | web-component margin default is 0 0 | | --jb-select-width | change the select component width default is 100% | | --jb-select-border-radius | web-component border-radius defualt is 16px | | --jb-select-border-color | border color of select in normal mode | | --jb-select-border-color-selected | border color when user select a value from list | | --jb-select-bgcolor | background color of input | | --jb-select-overlay-bgcolor | background of select overlay when open in mobile and tablet screen | | --jb-select-list-max-height | max height of option list | | --jb-select-border-bottom-width | width of border bottom | | --jb-select-border-width | width of border | | --jb-select-label-color | color of label default is #1f1735 | | --jb-input-label-font-size | label font size default is 0.8em | | --jb-input-label-font-weight | color of label defualt is #1f1735 | | --jb-select-option-color | change option text color | | --jb-select-option-color-hover | change option text color on hover | | --jb-select-option-background-color | background of options default is transparent | | --jb-select-option-background-color-hover | background of options on mouse hover default is #1073db | | --jb-select-input-color | color of input value | | --jb-select-bgcolor-selected | set background color for selected status | | --jb-select-selected-value-color | selected value text color default is #1f1735 | | --jb-select-selected-value-font-size | font-size of selected value default is 1.1rem | | --jb-select-message-color | message text color default is #929292 | | --jb-select-message-font-size | font size of message default is 0.7em | | --jb-select-message-font-weight | font weight of message box default is normal | | --jb-select-placeholder-color | placeholder color default is initial | | --jb-select-placeholder-font-size | placeholder font-size default is 1.1em | | --jb-select-height | jb-select box height | | --jb-select-mobile-search-input-height | when user open select on mobile there is a search box input this var will set its height | | --jb-select-mobile-item-list-margin | when user open select on mobile there is gap between search box & list that can be customized | | --jb-select-list-padding | padding of opened list box default is 16px 0 | | --jb-select-close-bg-color | close button bg-color default is #1f1735 | | --jb-select-close-x-color | close button x color default is #fff | | --jb-select-close-bg-opacity | close button bg opacity default is 0.4 | | --jb-select-mobile-input-bgcolor | background color search input when open in mobile | | --jb-select-mobile-search-border-width | when user open select on mobile, search box can have its own border width config | | --jb-select-mobile-search-border-color | when user open select on mobile, search box can have its own border color config | | --jb-select-mobile-search-border-bottom-width | when user open select on mobile, search box can have its own border bottom width config | | --jb-select-mobile-search-border-bottom-color | when user open select on mobile, search box can have its own border bottom color config | | --jb-select-mobile-search-border-radius | when user open select on mobile, search box can have its own border radius | | --jb-select-middle-div-height | separator line between input and list default is 0px and hidden but you can cahange it | | --jb-select-middle-div-color | change separator line color | | --jb-select-middle-div-margin | change seprator line margin | | --jb-select-middle-div-mobile-margin | change separator line margin in mobile modal | | --jb-select-middle-div-radius | change separator line border-radius | | --jb-select-list-scroll-color | list item scroll color default is #c3c3c3 | | --jb-select-list-scroll-border-radius | list item scroll border-radius default is 4px | | --jb-select-select-box-margin | margin of internal element called select box that wrapper display element of form in one box |