# smh-rn-typescript-hooks
> smh-rn-typescript-hooks
Latest version **0.0.18** (published 2025-07-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install smh-rn-typescript-hooks
pnpm add smh-rn-typescript-hooks
yarn add smh-rn-typescript-hooks
bun add smh-rn-typescript-hooks
```
## Health
**Score 40/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.18 |
| Published | 2025-07-15 |
| First published | 2023-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 90.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | smuniharish |
| Maintainers | smuniharish |
| Keywords | react-native, ios, android |
## Links
- npm: https://www.npmjs.com/package/smh-rn-typescript-hooks
- Repository: https://github.com/smuniharish/smh-rn-typescript-hooks
- Homepage: https://github.com/smuniharish/smh-rn-typescript-hooks#readme
- Issues: https://github.com/smuniharish/smh-rn-typescript-hooks/issues
- npm.io page: https://npm.io/package/smh-rn-typescript-hooks
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 0.0.18 (latest) — 2025-07-15
- 0.0.17 — 2025-01-24
- 0.0.16 — 2025-01-24
- 0.0.15 — 2025-01-22
- 0.0.14 — 2024-10-05
- 0.0.13 — 2024-10-05
- 0.0.12 — 2024-09-20
- 0.0.11 — 2024-08-16
- 0.0.10 — 2024-08-16
- 0.0.9 — 2024-07-30
- 0.0.8 — 2024-03-07
- 0.0.7 — 2023-10-12
- 0.0.6 — 2023-09-15
- 0.0.5 — 2023-09-14
- 0.0.4 — 2023-09-12
- … 2 more at https://npm.io/package/smh-rn-typescript-hooks/versions
## README
# smh-rn-typescript-hooks
smh-rn-typescript-hooks
## Installation
React Native
```sh
npm install --save smh-rn-typescript-hooks
```
Expo
```sh
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](https://github.com/gabrieldonadel/rn-material-ui-textfield#readme) 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
```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 (
);
};
export default TextInput;
```
#### useValidateCheckBox()
We tested this with the help of [expo-checkbox](https://docs.expo.dev/versions/latest/sdk/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
```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 (
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](https://hossein-zare.github.io/react-native-dropdown-picker-website/) 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
```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 (
{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](mailto:samamuniharish@gmail.com?subject=[GitHub])
## 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](https://github.com/sponsors/smuniharish). Or if you are looking for a private support or help in customizing the experience, then reach out to me on Linkedin [@smuniharish](https://www.linkedin.com/in/smuniharish).
---
## 🧑💻 Author
Made with ❤️ by [S MUNI HARISH](mailto:samamuniharish@gmail.com)
[GitHub](https://github.com/smuniharish) • [LinkedIn](https://www.linkedin.com/in/smuniharish)
---
## 📄 License
Apache-2.0 License – see [LICENSE](./LICENSE)
---
_Source: https://npm.io/package/smh-rn-typescript-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._