Provides an element with validate functionality added to the HTML element
(HTML要素にvalidateの機能を付け加えた要素を提供します)
How does the element show
(要素は以下に示します)
- InputElement
- NumberInputElement
- CheckBoxElement
- PullDownElement
- RadioButton
- React
-
npm install reusable-react-components-br-hir
(yarn add reusable-react-components-br-hir
) - Once the package is installed, you can import the library using import or require approach:
import { ValidatedPullDown } from 'reusable-react-components-br-hir'
- Use the following elements
- ValidatedTextInput
- ValidatedNumberInput
- ValidatedCheckBox
- ValidatedPullDown
- ValidatedRadioButton
import { useRef, useState } from 'react'
import {
ValidatedCheckBox,
ValidatedNumberInput,
ValidatedPullDown, ValidatedRadioButton,
ValidatedTextInput
} from 'reusable-react-components-br-hir'
import { validate } from './util.tsx'
import plane from './assets/plane.png'
function App() {
// Create a state to put the value in
const [textValue, setTextValue] = useState('')
// Added ref option to validate check
const textInputRef = useRef<any>()
const [onChangeTextValue, setOnChangeTextValue] = useState('')
const onChangeTextValueRef = useRef<any>()
const [numberValue, setNumberValue] = useState('')
const numberValueRef = useRef<any>()
const [arrayCheckBoxValue, setArrayCheckBoxValue] = useState<string[]>([])
const checkboxValueRef = useRef<any>()
const [pullDownValue, setPullDownValue] = useState('')
const [selectValues, setSelectValues] = useState<string[]>([])
const pullDownValueRef = useRef<any>()
const [radioButtonValue, setRadioButtonValue] = useState('')
const radioButtonValueRef = useRef<any>()
// Create a function to validate check when the button is pressed
const confirm = () => {
const isValid = validate([textInputRef, onChangeTextValueRef,numberValueRef,checkboxValueRef,pullDownValueRef,radioButtonValueRef])
alert(isValid ? 'Valid' : 'Not Valid')
}
return (
<div>
// ValidatedTextInput component where validate fires on onChange
<ValidatedTextInput
id='EagerTextInput'
// If you want to check validation with a confirmation button, etc., pass a ref object to the ref option and execute the process later.
ref={onChangeTextValueRef}
label='Eager Text Input Validation'
placeholder='text place holder'
value={onChangeTextValue}
onChange={setOnChangeTextValue}
// Write the conditions to validate as an array
validations={[
[(value: string) => value.length < 5, 'Too Long'],
[(value: string) => value.length > 1, 'Too short'],
]}
/>
// ValidatedTextInput component that uses isNotOnChangeValidate to fire validation in onBlur
<ValidatedTextInput
id='gerTextInput'
ref={textInputRef}
label='lazy Text Input Validation'
placeholder='text place holder'
value={textValue}
onChange={setTextValue}
// Since isNotOnChangeValidate is true, validate is fired in the onBlur event.
onBlur={() => {
console.log('onBlur')
}}
validations={[
[(value: string) => value.length < 5, 'Too Long'],
[(value: string) => value.length > 1, 'Too short'],
]}
maxLength={5}
// Validate is usually fired in the onChange event, but textInput can be validated at any time
isNotOnChangeValidate={true} //nameがきになる
/>
// ValidatedNumberInput component that only allows input of numbers
<ValidatedNumberInput
id='numberInputId'
ref={numberValueRef}
label='validatedNumberValue'
placeholder='mber input text' value={numberValue}
onChange={setNumberValue}
validations={[
[(value: string) => value < '5', 'warning'],
]}
// If the thousand separator is set to true, the notation will be as follows.
// 10000000->10,000,000
thousandSeparatorMode={true}
/>
// ValidatedCheckBox component with validate function
<ValidatedCheckBox
id='checkBoxId'
label='checkBoxLabel'
ref={checkboxValueRef}
value={arrayCheckBoxValue}
onChange={setArrayCheckBoxValue}
// Enter the elements you want to display in the check box as an array.
options={['item1', 'item2', 'item3']}
validations={[
[
(value: string[]) => {
return value.includes('item1')
},
'warning',
],
]}
/>
// component with validate function
<ValidatedPullDown
id='pullDownId'
ref={pullDownValueRef}
// Value entered by user
value={pullDownValue}
// event handler when user enters
onChange={setPullDownValue}
// selected value
selectValues={selectValues}
// Event handler when user selects
onSelectValues={setSelectValues}
// Set in object format to display as a list
// If you want to insert an image, please enter the path in optionPath
options={[{ optionName: 'test1',optionPath:plane }, { optionName: 'option2' }]}
validations={[
[(value: string) => value < '5', 'warning'], //selectValueにするべき
]}
/>
// ValidatedRadioButton component with validate function
<ValidatedRadioButton
id='radioButtonId'
ref={radioButtonValueRef}
name='radioButton'
value={radioButtonValue}
onChange={setRadioButtonValue}
options={['test1', 'option2' ]}
validations={[
[(value: string) => value < 'test1', 'warning'],
]}
/>
<button onClick={confirm}>Confirm</button>
</div>
)
}
export default App
validate function that runs on confirm
import { RefObject } from 'react'
export const validate = (validatableInputList: RefObject<any>[]) =>
validatableInputList
.map((ref) => {
try {
// If you run ref?.current?.triggerValidation(true), validate will run at any timing.
ref?.current?.triggerValidation(true)
return true
} catch (e) {
return false
}
})
.every((bool) => bool)
syntax mark down
- case by validation style change case
.withValidationContainer {
.errorMessage {
color: black;
}
}
error massage以外のstyleは必要ない
div でwrapしてそのdivにかける
pulldown -> dropdown change
- case by pulldown style change
.optionContainer {
&:hover {
background-color: pink;
}
}
syntax mark down
- Introduce npm to the package (project) to be created
(作成するパッケージ(プロジェクト)にnpmを導入)
npm init
- Set the following options in the created package.json
(作成されたpackage.jsonに以下のオプションを記入)
{
"name": "reusable-react-components-br-hir",
"version": "0.0.0",
"description": "This package explain",
"main": "index.js",
"types": "dist/main.d.ts", // type script project
...
}
- project build
- npm login
npm login
- npm upload
npm publish --access=public
When updating a package (project), update the version.
(パッケージ(プロジェクト)をアップデートするときはpackage.jsonに記述したversionを更新)
- BR-hir