0.1.57 • Published 1 year ago
@yan_coquoz/react_input v0.1.57
React Component
Minimalist input-like components for React.
Prerequisites
- A text editor like
VSCode, Vim, IntelliJ...
- Node.js > v.16
- Git
Summary
React Components
InputText
InputNumber
SelectField
Button
Modale
DatePicker
ScrollBar
Properties
All properties with a * are required :
InputText
idName
*: {String} Corresponds to thehtmlFor
andclassName
.properties of the label, as well as theid
and thename
of the input.labelName
: {String}label
value andplaceholder
content.isRequired
: {Boolean} Whether the value is required or not.myClass
: {String} component class name.toUpperCase
: {Boolean} if you need to upper case label.onChange
: {Function} To have a controlled component, allows to retrieve the values of the input: name and value, for each action on the keyboard.value
: {String} the value found in the field.placeholder
: {String} the placeholder.
InputNumber
idName
*: {String} Corresponds to thehtmlFor
andclassName
properties of the label, as well as theid
and thename
of the input.labelName
: {String}label
andplaceholder
contentisRequired
: {Boolean} Whether the value is required or notmyClass
*: {String} component class namemini
: {Number} minimum valuemaxi
: {Number} maximum valuetoUpperCase
: {Boolean} if you need to upper case label.onChange
: {Function} To have a controlled component, allows to retrieve the values of the input: name and value, for each action on the keyboard.value
: {String} the value found in the field.placeholder
: {String} the placeholder.
SelectField
options
*: {Array of Object || Array} for theoption
tag, if it 's an Array of Object, it must contain a propertyname
who will be displaylabelName
: {String} instead oflabel
isRequired
: {Boolean} Whether the value is required or not.idName
*: {String} Corresponds to thehtmlFor
andclassName
properties of the label, as well as theid
and thename
of the input.onChange
: {Function} to get the event.toUpperCase
: {Boolean} if you need to upper case labeloptValue
: {Boolean} Render 'Options' for first value in select area. If true, the first value will be options, but ifisRequired
is true, the value will be empty.group
: {Boolean} false by default. If true,tabs
must look like this : [{car:...arrayOfCars,bike:...arrayOfBikes}], then optgroup label will becar
andbike
.onClick
: {Function} Capture the click of the field.onBlur
: {Function} Capture the change of the field.value
: {String} the value found in the field.
Button
type
*: {String} The type of button : button, submit, reset...children
*: {String} The content, like : 'validate', 'save' ...myClass
: {String} A class to give some styleidName
: {String} Id of the buttononClick
: {Function} If you need a function.. (onClick)
Modale
message
*: {String} The message you need to displayopen
*: {Boolean} the order to open the modalsendStyle
: {String} Send color to the border of close button and text.onClose
*: {Function} the order to close the modal
DatePicker
idName
*: {String} Corresponds to thehtmlFor
andclassName
properties of the label, as well as theid
of the input.labelName
: {String}label
value.myClass
: {String} inputclassName
isRequired
: {Boolean} Whether the value is required or not.toUpperCase
: {Boolean} if you need to upper case labellang
: {String} to format date. by default "en" : yyyy-MM-dd. Can be french with "fr" : dd-MM-yyyyplaceholder
: {String} What is expected in the field.
ScrollBar
barColor
: {Number} Height of the progress bar, in pixels.barHeight
: {String} Progress bar color. 5px by default.barOpacity
: {Boolean} Gives a gradual opacity effect along the bar. False by default.
Example
import React, {useState} from "react"
import { InputText, Button, Modale, DatePicker } from "@yan_coquoz/react_input"
const MyForm = () => {
const [isOpen, setIsOpen] = useState(false);
const tab1 = ["red", "blue", "green"];
const tab2 = ["short", "coat", "socket"];
const tab3 = ["moto", "car", "boat"];
const arrays = [
{ colors: [...tab1] },
{ clothes: [...tab2] },
{ vehicle: [...tab3] },
];
const selectTabs = {
options: arrays,
idName: "arrays",
labelName: "all tables",
optValue: true,
toUpperCase: true,
isRequired: true,
group: true,
};
const barOptions = {
barColor: "rgba(3, 83, 255, 0.8)",
barHeight: 5,
barOpacity: true,
}
function handleOpenModal() {
setIsOpen(true);
}
function handleInputText(name, value){
console.log(name, value)
// do what you want
}
return(
<div>
<ScrollBar {...barOptions}/>
<form>
<InputText
idName={firstname}
labelName={first name}
isRequired={true}
sendValue={handleInputText}
myClass={"input_firstname"}
toUpperCase={true}
/>
<DatePicker
idName={"dateOfBirth"}
isRequired={false}
labelName={"date of birth"}
toUpperCase={true}
lang={"en"}
/>
<SelectField {...selectTabs}>
<Button type="submit">Save</Button>
</form>
<div>
<Button type="button" onClick={handleOpenModal}>
Open Modale
</Button>
<Modale message="Hello World !!!" open={isOpen} sendStyle={"#F0F"} onClose={()=> setIsOpen(!isOpen)} />
</div>
</div>
)
}
0.1.57
1 year ago
0.1.56
1 year ago
0.1.55
1 year ago
0.1.54
1 year ago
0.1.53
1 year ago
0.1.52
1 year ago
0.1.51
1 year ago
0.1.50
1 year ago
0.1.49
1 year ago
0.1.48
1 year ago
0.1.47
1 year ago
0.1.46
1 year ago
0.1.45
1 year ago
0.1.44
1 year ago
0.1.43
1 year ago
0.1.42
1 year ago
0.1.41
1 year ago
0.1.40
1 year ago
0.1.39
1 year ago
0.1.38
1 year ago
0.1.37
1 year ago
0.1.36
1 year ago
0.1.35
1 year ago
0.1.34
1 year ago
0.1.33
1 year ago
0.1.32
1 year ago
0.1.31
1 year ago
0.1.30
1 year ago
0.1.29
1 year ago
0.1.28
1 year ago
0.1.27
2 years ago
0.1.26
2 years ago
0.1.25
2 years ago
0.1.24
2 years ago
0.1.23
2 years ago
0.1.22
2 years ago
0.1.21
2 years ago
0.1.20
2 years ago
0.1.19
2 years ago
0.1.18
2 years ago
0.1.17
2 years ago
0.1.1
2 years ago
0.1.16
2 years ago
0.1.15
2 years ago
0.1.14
2 years ago
0.1.13
2 years ago
0.1.12
2 years ago
0.1.11
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.0
2 years ago