react-library-senga

A React library for creating custom Select components.

prerequisites

• react
• react-dom
• npm

Repository

• react-library-senga

CodeSandbox

try it on CodeSandBox

installation

install with npm:

npm install react-select-for-hrnet

install with yarn:

yarn add react-select-for-hrnet

using options

You can pass an array of options to the options prop to define the possible choices in the dropdown menu. Each option should have a value and a label. Here's an example:

import React from 'react';
//import the Select component 
import Select from 'react-select-for-hrnet';
//import the css file
import "react-select-for-hrnet/src/Select.css";

function MySelect(){
  //customise your options
   const optionList = [
      {value: 'option1', label: 'Option 1'},
      {value: 'option2', label: 'Option 2'},
      {value: 'option3', label: 'Option 3'},
   ];

    return (
        <Select
        options={optionList}
        />
    );
}

export default MySelect;

customising the select

in your css file, you can customise the select component by using the following classes:

.selectInput {
  color: lightgray;
  border-radius: 5px;
}

.selectInput:hover {
  background-color: lightblue;
}