medhira-rn-typescript-hooks

Typed React Native validation hooks for forms, selects, and checkboxes

Engineering Intelligence Across Everything

Installation • Hooks • Architecture • Documentation • Contributing

Why this package?

| Benefit | Description | | --- | --- | | Form-ready hooks | Validation logic for text inputs, selects, and checkboxes | | Typed API | Exported TypeScript options and result interfaces | | Consistent behavior | Shared state management via medhira-react-typescript-hooks | | Custom errors | Override every validation message | | Zero native code | Pure JavaScript hooks — works with Expo and React Native CLI | | Tree-shakeable | sideEffects: false with dual ESM/CJS builds |

Installation

npm install medhira-rn-typescript-hooks medhira-react-typescript-hooks react react-native

# Expo
npx expo install medhira-rn-typescript-hooks medhira-react-typescript-hooks

Peer dependency: This library requires medhira-react-typescript-hooks (>=0.1.0).

Quick Start

import { TextInput, View, Text } from 'react-native';
import { useValidateForm } from 'medhira-rn-typescript-hooks';

const EmailField = () => {
  const form = useValidateForm({
    type: 'string',
    label: 'Email',
    isRequired: true,
    keyboard: 'email-address',
    validationPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    validError: 'Please enter a valid email',
  });

  return (
    <View>
      <TextInput
        value={form.value ?? ''}
        onChangeText={form.valueChangeHandler}
        onFocus={form.valueFocusHandler}
        onBlur={form.valueBlurHandler}
        editable={form.inputIsEditable}
      />
      {form.hasError && <Text>{form.customError}</Text>}
    </View>
  );
};

Hooks

| Hook | Purpose | | --- | --- | | useValidateForm | String/number input validation with regex, min/max, and length rules | | useValidateSelect | Single or multiple select validation with min/max selections | | useValidateCheckBox | Checkbox validation with required support and custom colors |

Architecture

flowchart TB
    subgraph app["Your React Native App"]
        FORM["Form Screen"]
    end

    subgraph pkg["medhira-rn-typescript-hooks"]
        UVF["useValidateForm"]
        UVS["useValidateSelect"]
        UVC["useValidateCheckBox"]
    end

    subgraph peer["medhira-react-typescript-hooks (peer)"]
        UDR["useDefaultReducer"]
    end

    FORM --> UVF & UVS & UVC
    UVF & UVS & UVC --> UDR

sequenceDiagram
    participant User
    participant Input as TextInput
    participant Hook as useValidateForm
    participant State as patchState

    User->>Input: type / focus / blur
    Input->>Hook: valueChangeHandler / focus / blur
    Hook->>State: update value + focus flags
    Hook->>Hook: run validation rules
    Hook->>State: set isValid + customError
    Hook-->>Input: value, hasError, customError

Published entry point: medhira-rn-typescript-hooks only. Do not import from internal build paths.

useValidateForm

Form validation hook for TextInput fields.

import { useValidateForm } from 'medhira-rn-typescript-hooks';

const form = useValidateForm({
  type: 'string',
  label: 'Email',
  isRequired: true,
  keyboard: 'email-address',
  minLength: 5,
  maxLength: 100,
  validationPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
  validError: 'Please enter a valid email',
});

| Option | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | type | 'string' \| 'number' | Yes | — | Field data type | | label | string | Yes | — | Field label | | isRequired | boolean | Yes | — | Whether the field is required | | keyboard | string | No | 'default' | Keyboard type | | minValue / maxValue | number | No | — | Number range (number type) | | minLength / maxLength | number | No | — | Length range (string type) | | defaultValue | string \| number | No | — | Initial value | | validationPattern | RegExp | No | — | Regex validation | | valueChangeCallback | (text: string) => void | No | — | Called on value change |

useValidateSelect

Dropdown/select validation with single and multiple selection support.

import { useValidateSelect } from 'medhira-rn-typescript-hooks';

const select = useValidateSelect({
  itemsList: [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ],
  isRequired: true,
  multiple: false,
  onChangeValueCallBack: (value) => {
    // handle selection
  },
});

For native pickers, use @react-native-picker/picker or your preferred select component.

useValidateCheckBox

Checkbox validation with required support and customizable colors.

import { useValidateCheckBox } from 'medhira-rn-typescript-hooks';

const checkbox = useValidateCheckBox({
  isRequired: true,
  value: false,
  validError: 'Please accept the terms',
  checkedColor: '#4CAF50',
  uncheckedColor: '#9E9E9E',
});

Complete Form Example

import { View, TextInput, Text, Button } from 'react-native';
import {
  useValidateForm,
  useValidateSelect,
  useValidateCheckBox,
} from 'medhira-rn-typescript-hooks';

const SignUpForm = () => {
  const email = useValidateForm({
    type: 'string',
    label: 'Email',
    isRequired: true,
    validationPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
  });

  const country = useValidateSelect({
    itemsList: [
      { label: 'USA', value: 'us' },
      { label: 'UK', value: 'uk' },
    ],
    isRequired: true,
  });

  const terms = useValidateCheckBox({
    isRequired: true,
    value: false,
  });

  const canSubmit = email.isValid && country.isValid && terms.isValid;

  return (
    <View>
      <TextInput
        value={email.value ?? ''}
        onChangeText={email.valueChangeHandler}
        onBlur={email.valueBlurHandler}
      />
      {email.hasError && <Text>{email.customError}</Text>}

      {/* Wire country.value to your picker component */}
      {country.hasError && <Text>{country.customError}</Text>}

      {/* Wire terms.value to your checkbox component */}
      {terms.hasError && <Text>{terms.customError}</Text>}

      <Button title="Submit" disabled={!canSubmit} onPress={() => {}} />
    </View>
  );
};

Documentation

Full API reference, architecture diagrams, and examples:

https://medhira-rn-typescript-hooks.readthedocs.io

Requirements

• React 18+
• React Native 0.60+
• medhira-react-typescript-hooks >= 0.1.0

Contributing

Contributions are welcome! See the documentation for development setup.

git clone https://github.com/HELLOMEDHIRA/medhira-rn-typescript-hooks.git
cd medhira-rn-typescript-hooks
npm install
npm test
npm run build

Sponsor & Support

• GitHub: HELLOMEDHIRA
• Email: [email protected]
• LinkedIn: smuniiharish
• Sponsor: GitHub Sponsors

License

MIT

Made with passion by MEDHIRA