smh-rn-typescript-hooks

Installation

React Native

npm install --save smh-rn-typescript-hooks

Expo

npx expo install smh-rn-typescript-hooks

Available Hooks

useValidateForm
useValidateSelect
useValidateCheckBox

Usage

This packages is customized react-native hooks for making development easier, faster and more performant

useValidateForm()

We tested this with the help of rn-material-ui-textfield package.I would like to recommand to use the same. Other packages also work.

props

options

Parameter	Type	Description	Default	*Required
`type`	`string`	either "number" or "string"	None	True
`label`	`string`	TextInput Label Name	None	True
`isRequired`	`boolean`	It will checks the applied field is mandatory or not	None	True
`keyboard`	`string`	keyboard type for textinput	default	False
`minValue`	`number`	This is the minimum value for number text input	None	False
`maxValue`	`number`	This is the maximum value for number text input	None	False
`minLength`	`number`	This is the minimum Length for string text input	None	False
`maxLength`	`number`	This is the maximum value for string text input	None	False
`defaultValue`	`number or string`	This is the default value for string	None	False
`isDisabled`	`boolean`	For disable the user text input	None	False
`isEditable`	`boolean`	To restrict the user to edit the value instead of disable	None	False
`validationPattern`	`regex pattern`	This is the recommended way to validate the user input (min and max values will be not consider once validationPattern presents)	None	False
`minValueError`	`string`	customizing the error for Minimum Value check	Minimum value is required !!!	False
`maxValueError`	`string`	customizing the error for Maximum Value check	Maximum value is required !!!	False
`minLengthError`	`string`	customizing the error for Minimum Length check	Minimum length is required !!!	False
`maxLengthError`	`string`	customizing the error for Maximum Value check	Maximum Length is required !!!	False
`focusError`	`string`	customizing the error on Focus	Value is required !!!	False
`validError`	`string`	customizing the error on not Valid input	Given value is not valid !!!	False
`valueChangeCallback`	`function`	it will triggers when the value changes	None	False

Structured Parameters

Parameter	Definition	type
`label`	Text Input label	string
`value`	Text Input value	string
`required`	To get the Text Input is Required or not	boolean
`keyboardType`	To get the Text Input keyboard type	string
`defaultValue`	To get the default text input value	string or number
`isValid`	To get the given input is valid or not	boolean
`isFocused`	To get the given input is Focused or not	boolean
`isBlured`	To get the given input is Blured or not	boolean
`hasError`	To get the given value is error or not	boolean
`customError`	To know the exact error	string
`inputIsDisabled`	To get whether input is disabled or not	boolean
`inputIsEditable`	To get whether input is editable or not	boolean
`min`	To get minimum value for textinput	number
`max`	To get maximum value for textinput	number
`valueChangeHandler`	for updating the values in text input	function
`valueFocusHandler`	It will fires when the text input focused	function
`valueBlurHandler`	It will fires when the text input blured	function
`reset`	It will helps to reset the function	function

example

import {
  TextField,
  FilledTextField,
  OutlinedTextField,
} from "rn-material-ui-textfield";
import { StyleSheet, Text, View } from "react-native";
import { useValidateForm } from "smh-rn-typescript-hooks";

const TextInput = () => {
  const {
    label: textLabel,
    value: textValue,
    required: textIsRequired,
    keyboardType: textKeyboardType,
    defaultValue: textDefaultValue,
    isValid: textIsValid,
    isFocused:textIsFocused,
    isBlured:textIsBlured,
    hasError: textHasError,
    customError: textCustomError,
    inputIsDisabled: textIsDisabled,
    inputIsEditable: textIsEditable,
    min: textMin,
    max: textMax,
    valueChangeHandler: textValueChangeHandler,
    valueFocusHandler: textFocusHandler,
    valueBlurHandler: textBlurHandler,
    reset: textResetHandler,
  } = useValidateForm({
    type: "string",
    label: "TextLabel",
    isRequired: true,
    minLength: 10,
    maxLength: 15,
    isDisabled: false,
    isEditable: true,
    //   validationPattern:/^([a-z0-9]{5,})$/,
    minLengthError: "MinLengthError",
    maxLengthError: "MaxLengthErrorSudhakar",
    validError: "ValidError",
  });
  const {
    label: numberLabel,
    value: numberValue,
    required: numberIsRequired,
    keyboardType: numberKeyboardType,
    defaultValue: numberDefaultValue,
    isValid: numberIsValid,
    hasError: numberHasError,
    customError: numberCustomError,
    inputIsDisabled: numberIsDisabled,
    inputIsEditable: numberIsEditable,
    min: numberMin,
    max: numberMax,
    valueChangeHandler: numberValueChangeHandler,
    valueFocusHandler: numberFocusHandler,
    valueBlurHandler: numberBlurHandler,
    reset: numberResetHandler,
  } = useValidateForm({
    type: "number",
    label: "Number",
    isRequired: true,
    minValue: 10,
    maxValue: 15,
    isDisabled: false,
    isEditable: true,
    minValueError: "MinValueError",
    maxValueError: "MaxValueError",
    validError: "ValidError",
  });
  return (
    <Fragment>
      <OutlinedTextField
        label={textLabel}
        value={textValue}
        keyboardType={textKeyboardType}
        onChangeText={textValueChangeHandler}
        onFocus={textFocusHandler}
        onBlur={textBlurHandler}
        disabled={textIsDisabled}
        editable={textIsEditable}
        min={textMin}
        max={textMax}
        defaultValue={textDefaultValue}
        error={textCustomError}
      />
      <OutlinedTextField
        label={numberLabel}
        value={numberValue}
        keyboardType={numberKeyboardType}
        onChangeText={numberValueChangeHandler}
        onFocus={numberFocusHandler}
        onBlur={numberBlurHandler}
        disabled={numberIsDisabled}
        editable={numberIsEditable}
        min={numberMin}
        max={numberMax}
        defaultValue={numberDefaultValue}
        error={numberCustomError}
      />
    </Fragment>
  );
};

export default TextInput;

useValidateCheckBox()

We tested this with the help of expo-checkbox package.I would like to recommand to use the same. Other packages also work.

props

options

Parameter	Type	Description	Default	*Required
`isRequired`	`boolean`	It will checks the applied field is mandatory or not	None	True
`value`	`boolean`	value of the checkbox	false	True
`validError`	`string`	customizing the error on not Valid	Please tick checkbox !!!	False
`checkedColor`	`string`	the color code when its checked	#000000	False
`uncheckedColor`	`string`	the color code when its unchecked	#a8a8a8	False
`onChangeCallBack`	`function`	it will triggers when the value changes	None	False
`disabled`	`boolean`	the checkbox is disabled or not	None	False

Structured Parameters

Parameter	Definition	type
`color`	Color of the checkbox	string
`value`	value of the checkbox	boolean
`isValid`	To get the given input is valid or not	boolean
`hasError`	To get the given value is error or not	boolean
`customError`	To know the exact error	string
`inputIsDisabled`	To get whether input is disabled or not	boolean
`onValueChangeHandler`	for updating the values in text input	function
`reset`	It will helps to reset the function	function

example

import Checkbox from 'expo-checkbox';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useValidateCheckBox } from 'smh-rn-typescript-hooks';

const CheckBox=()=> {
  const {
    color:checkboxColor,
    inputIsDisabled:checkBoxIsDisabled,
    onValueChangeHandler:checkBoxChangeHandler,
    value:checkBoxValue,
    isValid:checkBoxIsValid,
    customError:checkBoxCustomError,
    hasError:checkBoxHasError,
    reset:checkBoxReset,
}= useValidateCheckBox({
    isRequired:true,
    value:false,
    checkedColor:'#4630EB'
})
console.log("checkboxValue",checkBoxValue)

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Checkbox
          style={styles.checkbox}
          value={checkBoxValue}
          onValueChange={checkBoxChangeHandler}
          color={checkboxColor}
        />
        <Text style={styles.paragraph}>Custom colored checkbox</Text>
      </View>
    </View>
  );
}
export default CheckBox;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
    marginVertical: 32,
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paragraph: {
    fontSize: 15,
    color:"red"
  },
  checkbox: {
    margin: 8,
  },
});

useValidateSelect()

We tested this with the help of react-native-dropdown-picker package.I would like to recommand to use the same. Other packages also work.

props

options

Parameter	Type	Description	Default	*Required
`itemsList`	`items[]`	the list of objects having label value pairs	None	True
`isRequired`	`boolean`	to make it whether it will be required or not	None	True
`defaultValue`	`item`	object of label value pair	None	False
`disabled`	`boolean`	whether the input is disabled or not	false	False
`multiple`	`boolean`	if its true, allows to select multiple values	false	False
`min`	`number`	if multiple is true,we can restrict the minimum items to pick	0	False
`max`	`number`	if multiple is true,we can restrict the maximum items to pick	100	False
`minError`	`string`	customizing the error on not satisfies the Minimum picks	'Min Selection Expected !!!'	False
`maxError`	`string`	customizing the error on not satisfies the Maximum picks	'Max Selections reached !!!'	False
`validError`	`string`	customizing the error on not Valid	'Given value is not valid !!!'	False
`onChangeCallBack`	`function`	it will triggers when the value changes	None	False
`onSelectItemCallBack`	`funtion`	function to call on select item	None	False
`onPressItemCallBack`	`function`	function to callback when the picker will be pressed	#a8a8a8	False
`onOpenCallBack`	`funtion`	function to call when the picker is opened	None	False
`onCloseCallBack`	`function`	function to callback when the picker is closed	#a8a8a8	False

Structured Parameters

Parameter	Definition	type
`open`	To open or close the picker	boolean
`itemsList`	To get the list of items	items[]
`value`	value of the picked items	item or items[]
`isDisabled`	The status of picker is disabled or not	boolean
`setItems`	function to set the Items after picker renders	function
`setValue`	function to set the Items	function
`setOpen`	function to set the picker open or close	function
`onChangeValueCallBack`	function for after changing values	function
`onSelectItemCallBack`	function for after selecting values	function
`onPressCallBack`	function for after Pressing the picker	function
`onOpenCallBack`	function for after Opening the picker	function
`onCloseCallBack`	function for after closing the picker	function
`min`	to get the minimum value of the picker when multiple is true	number
`max`	to get the maximum value of the picker when multiple is true	number
`multiple`	to get whether multiple is true or false	boolean
`selectedItems`	to get the list of selected items	items[] or item
`selectedValues`	to get the list of selected values	items[] or item
`isValid`	To get the given input is valid or not	boolean
`hasError`	To get the given value is error or not	boolean
`customError`	To know the exact error	string
`reset`	To reset everything	function

example

import { View, Text } from 'react-native'
import React, { Fragment, useEffect } from 'react'
import DropDownPicker from "react-native-dropdown-picker";
import { useValidateSelect } from 'smh-rn-typescript-hooks';

const Dropdown = () => {
    const {
        open:selectOpen,
        itemsList:selectItems,
        value:selectValue,
        isDisabled:selectIsDisabled,
        setItems:selectSetItems,
        setValue:selectSetValue,
        setOpen:selectSetOpen,
        onChangeValueCallBack:selectOnChangeValueCallBack,
        onSelectItemCallBack:selectOnSelectItemCallBack,
        onPressCallBack:selectOnPressCallBack,
        onOpenCallBack:selectOnOpenCallBack,
        onCloseCallBack:selectOnCloseCallBack,
        min:selectMin,
        max:selectMax,
        multiple:selectMultiple,
        selectedItems:selectSelectedItems,
        selectedValues:selectSelectedValues,
        isValid:selectIsValid,
        hasError:selectHasError,
        customError:selectCustomError,
    } = useValidateSelect({
        itemsList:[
            {label: 'Apple', value: 'apple'},
            {label: 'Banana', value: 'banana'},
            {label: 'Mango', value: 'mango'},
            {label: 'Lemon', value: 'lemon'},
          ],
          isRequired:true,
          // defaultValue:"banana",
          defaultValue:["banana","apple"],
          multiple:true
    })
    useEffect(() => {
      selectSetItems([
        {label: 'Apple', value: 'apple'},
        {label: 'Banana', value: 'banana'},
      ])
    },[])
  return (
    <Fragment>
    <DropDownPicker
        open={selectOpen}
        mode={"BADGE"}
        // style={styles.pickerStyle}
        // textStyle={styles.pickerItem}
        // containerStyle={styles.pickerItem}
        // labelStyle={styles.pickerItem}
        // placeholder={label}
        // listMode="MODAL"
        closeAfterSelecting={true}
        value={selectValue}
        items={selectItems}
        setOpen={selectSetOpen}
        setValue={selectSetValue}
        // setItems={setItems}
        autoScroll={true}
        itemSeparator={true}
        onChangeValue={selectOnChangeValueCallBack}
        onSelectItem={selectOnSelectItemCallBack}
        disabled={selectIsDisabled}
        onPress={selectOnPressCallBack}
        onOpen={selectOnOpenCallBack}
        onClose={selectOnCloseCallBack}
        min={selectMin}
        max={selectMax}
        multiple={selectMultiple}
        searchable={true}
      />
      <Text style={{color:"red",fontSize:20}}>{selectIsValid.toString()} - {selectHasError.toString()} - {selectCustomError}</Text>
      </Fragment>
  )
}

export default Dropdown

And we're done 🎉

Contributing

Contribution are always welcome, no matter how large or small !

We want this community to be friendly and respectful to each other.Please follow it in all your interactions with the project.

Please feel free to drop me a mail S MUNI HARISH

Acknowledgements

Thanks to the authors of these libraries for inspiration

Sponsor & Support

To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Linkedin @smuniharish.

License

MIT

Made with ❤️