smh-rn-typescript-hooks

Installation

React Native
``

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


Expo

sh
npx expo install smh-rn-typescript-hooks


$3

* 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

`$3`

js
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 (
    
              label={textLabel}
        value={textValue}
        keyboardType={textKeyboardType}
        onChangeText={textValueChangeHandler}
        onFocus={textFocusHandler}
        onBlur={textBlurHandler}
        disabled={textIsDisabled}
        editable={textIsEditable}
        min={textMin}
        max={textMax}
        defaultValue={textDefaultValue}
        error={textCustomError}
      />
              label={numberLabel}
        value={numberValue}
        keyboardType={numberKeyboardType}
        onChangeText={numberValueChangeHandler}
        onFocus={numberFocusHandler}
        onBlur={numberBlurHandler}
        disabled={numberIsDisabled}
        editable={numberIsEditable}
        min={numberMin}
        max={numberMax}
        defaultValue={numberDefaultValue}
        error={numberCustomError}
      />
    
  );
};
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

`$3`

js
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 (
    
      
                  style={styles.checkbox}
          value={checkBoxValue}
          onValueChange={checkBoxChangeHandler}
          color={checkboxColor}
        />
        Custom colored checkbox
      
    
  );
}
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

`$3`

js
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 (
    
            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}
      />
      {selectIsValid.toString()} - {selectHasError.toString()} - {selectCustomError}
      
  )
}

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.

---

🧑‍💻 Author

Made with ❤️ by S MUNI HARISH

GitHub • LinkedIn

---

📄 License

Apache-2.0 License – see LICENSE

smh-rn-typescript-hooks

Installation

React Native
``

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


Expo

sh
npx expo install smh-rn-typescript-hooks


$3

* 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

* Structured Parameters

`$3`

js
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 (
    
              label={textLabel}
        value={textValue}
        keyboardType={textKeyboardType}
        onChangeText={textValueChangeHandler}
        onFocus={textFocusHandler}
        onBlur={textBlurHandler}
        disabled={textIsDisabled}
        editable={textIsEditable}
        min={textMin}
        max={textMax}
        defaultValue={textDefaultValue}
        error={textCustomError}
      />
              label={numberLabel}
        value={numberValue}
        keyboardType={numberKeyboardType}
        onChangeText={numberValueChangeHandler}
        onFocus={numberFocusHandler}
        onBlur={numberBlurHandler}
        disabled={numberIsDisabled}
        editable={numberIsEditable}
        min={numberMin}
        max={numberMax}
        defaultValue={numberDefaultValue}
        error={numberCustomError}
      />
    
  );
};
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

* Structured Parameters

`$3`

js
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 (
    
      
                  style={styles.checkbox}
          value={checkBoxValue}
          onValueChange={checkBoxChangeHandler}
          color={checkboxColor}
        />
        Custom colored checkbox
      
    
  );
}
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

* Structured Parameters

`$3`

js
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 (
    
            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}
      />
      {selectIsValid.toString()} - {selectHasError.toString()} - {selectCustomError}
      
  )
}

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

---

🧑‍💻 Author

Made with ❤️ by S MUNI HARISH

GitHub • LinkedIn

---

📄 License

Apache-2.0 License – see LICENSE