0.5.1 • Published 2 years ago
react-dropdown-component-library v0.5.1
Getting Started with React Dropdown Component Library
A library of React component for projects using Create React App.
react-dropdown-component-library
Created to replace the JQuery's widget selectmenu.js
.
Installation
npm install react-dropdown-component-library
Usage
With value as title attribute and the default css
import Dropdown from 'react-dropdown-component-library'
import 'react-dropdown-component-library/dist/style.css' // the default CSS
const App = () => {
const [textValueDropdown1, setTextValueDropdown1] = React.useState("");
const handleTextValueChangeDropdown1 = (value: string) => {
setTextValueDropdown1(value ? value : "");
};
...
// show the selected value in the h1 tag (Marketing)
return(
<>
<h1>Dropdown value : {textValueDropdown1}</h1>
<label id="combo-label1">Dropdown 1 with values</label>
<Dropdown
labelId="combo-label1"
defaultValue={{ value: "Marketing" }}
data={[
{ value: "Marketing" },
{ value: "Engineering" },
{ value: "Human Resources" },
{ value: "Legal" },
]}
messageIfNoData="No data found"
liftingDropDownValueUp={handleTextValueChangeDropdown1}
/>
</>
)
};
export default App;
Or with overrideValue as title attribute, and with your own style based from the original SASS file
.
import Dropdown from 'react-dropdown-component-library'
import './style.css'; // your own CSS
const App = () => {
const [textValueDropdown2, setTextValueDropdown2] = React.useState("");
const handleTextValueChangeDropdown2 = (value: string) => {
setTextValueDropdown2(value ? value : "");
};
...
// show the selected overrideValue in the h1 tag (CA)
return(
<>
<h1>Dropdown value : {textValueDropdown2}</h1>
<label id="combo-label2">Dropdown 2 with values</label>
<Dropdown
labelId="combo-label2"
defaultValue={{ value: "California", overrideValue: "CA" }}
data={[
{
value: "California",
overrideValue: "CA",
},
{
value: "Colorado",
overrideValue: "CO",
},
]}
messageIfNoData="No data found"
liftingDropDownValueUp={handleTextValueChangeDropdown2}
/>
</>
)
};
export default App;
Documentation
The complete documentation of react-dropdown-component-library
.
0.1.1-beta.8
2 years ago
0.2.1
2 years ago
0.1.1
2 years ago
0.4.1
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.5.1
2 years ago
0.1.1-beta.7
2 years ago
0.1.1-beta.6
2 years ago
0.1.1-beta.5
2 years ago
0.1.1-beta.4
2 years ago
0.1.1-beta.3
2 years ago
0.1.1-beta.2
2 years ago
0.1.1-beta.1
2 years ago
0.1.1-alpha.6
2 years ago
0.1.1-alpha.5
2 years ago
0.1.1-alpha.4
2 years ago
0.1.1-alpha.3
2 years ago
0.1.1-alpha.2
2 years ago
0.1.1-alpha.1
2 years ago
0.0.0-rc7
2 years ago
0.0.0-rc6
2 years ago
0.0.0-rc5
2 years ago
0.0.0-rc4
2 years ago
0.0.0-rc3
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.0
2 years ago
0.0.0-rc0
2 years ago
0.0.1-rc1
2 years ago
0.0.0-rc1
2 years ago
0.5.0-rc2
2 years ago
0.5.0-rc1
2 years ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago