reusable-react-components-br-hir v0.1.27

Reusable React Component with validate

TOC

Overview

Provides an element with validate functionality added to the HTML element
(HTML要素にvalidateの機能を付け加えた要素を提供します)
How does the element show
(要素は以下に示します)

• InputElement
• NumberInputElement
• CheckBoxElement
• PullDownElement
• RadioButton

Build with

• React

Installing

• 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
    1. ValidatedTextInput
    2. ValidatedNumberInput
    3. ValidatedCheckBox
    4. ValidatedPullDown
    5. ValidatedRadioButton

## Example

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()

const onChangeTextValue, setOnChangeTextValue = useState('') const onChangeTextValueRef = useRef()

const numberValue, setNumberValue = useState('') const numberValueRef = useRef()

const arrayCheckBoxValue, setArrayCheckBoxValue = useState<string[]>([]) const checkboxValueRef = useRef()

const pullDownValue, setPullDownValue = useState('') const selectValues, setSelectValues = useState<string[]>([]) const pullDownValueRef = useRef()

const radioButtonValue, setRadioButtonValue = useState('') const radioButtonValueRef = useRef()

// 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[]) => 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)

****

## Note

### Style change
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; } }

## npm upload
syntax mark down
1. Introduce npm to the package (project) to be created  
   (作成するパッケージ(プロジェクト)にnpmを導入)  
   `npm init`
2. 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 ... }

3. project build
4. npm login  
   `npm login`
5. npm upload  
   `npm publish --access=public`

****
**When updating a package (project), update the version.**  
(パッケージ(プロジェクト)をアップデートするときはpackage.jsonに記述したversionを更新)

## Author
* BR-hir