smh-rn-typescript-hooks

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 ❤️