npm package: @reignite/no-react
Description: React library for country specific naming order
Author: ssekandi
Latest version: 0.0.2

# Naming Order React

## @reignite/no-react 🌍

> A React component that dynamically generates input fields for personal names based on ISO2 country codes — ideal for internationalized forms.

---

## Overview

`NOReact` is a UI component built with React and `styled-components` that generates culturally-relevant name fields using the [`@reignite/no-core`](https://www.npmjs.com/package/@reignite/no-core) library which gives right name arrangement basing on the order the names appear on the official national documents, IDs. It auto-adjusts based on system or specified theme (`light`, `dark`) and ensures accessibility and responsiveness.

This package is particularly useful for:

-   International user registration forms
-   Government/public service portals
-   Identity validation apps

---

## Features

-   Country-sensitive name input fields using ISO 3166-1 alpha-2 codes
-   Supports `light`, `dark`, and `system` UI themes
-   Accessible input fields with labels and ARIA attributes
-   Fully controlled React component structure
-   Theming via `styled-components`
-   Typescript support

## Installation

```bash
npm install @reignite/no-react
# or
yarn add @reignite/no-react
```

### NOTE

**In case the UI does not match yours, I reacommend you [`@reignite/no-core`](https://www.npmjs.com/package/@reignite/no-core) npm library to customise your own UI.**

## Usage

```tsx
import { NONames } from "@reignite/no-core";
import { NOReact } from "@reignite/no-react";
import React, { useState, useEffect } from "react";

const App = () => {
    const [names, setNames] = useState<string[]>([]);
    const [countryCode, setCountryCode] = useState<Parameters<typeof NONames>[0]>("US");

    useEffect(() => {
        function getUserIso2CountryCode(){...} // should return "UG"|"US"|"KE"|"KR"; Gets Users country from ip address, Geolocation APIs, name it

        const code = getUserIso2CountryCode()
        setCountryCode(code)
    }, [])

    useEffect(() => {
        console.log(names) // See it in the browser
    }, [names])

    return (
        <NOReact
            countryCode2={countryCode}
            fallbackIso2="UG" {/* In case countryCode is not in the library, what country code should be used. */}
            favTheme="system" {/* Optional: Use it to match your theme */}
            setInputs={setNames}
        />
    );
};
```

## Props

| Prop               | Type                                             | Required | Description                                                                |
| ------------------ | ------------------------------------------------ | -------- | -------------------------------------------------------------------------- |
| `countryCode2`     | `string` (ISO2 code)                             | true     | Primary ISO2 code to determine name field structure                        |
| `fallbackIso2`     | `string` (ISO2 code)                             | false    | Fallback country code if `countryCode2` is unsupported. Defaults to `"UG"` |
| `favTheme`         | `"light" \| "dark"   \| "system"`                | false    | UI theme preference. Defaults to `"system"`                                |
| `setInputs`        | `React.Dispatch<React.SetStateAction<string[]>>` | true     | Callback to receive the array of entered name values                       |
| `lightThemeColors` | `Partial<DefaultTheme>`                          | { }      | Color Object to override default **LIGHT** theme colors                    |
| `darkThemeColors`  | `Partial<DefaultTheme>`                          | { }      | Color Object to override default **DARK** theme colors                     |

---

```ts
// For lightThemeColors and darkThemeColors
export interface DefaultTheme {
    bg: string; // backgroundColor
    text: string; // font/text color
    inputBorder: string; // Color of the input border when "NOT" focused
    label: string; // Color of the label text when input is NOT focused
    labelFocus: string; // Color of the label text when input is focused
    outline: string; // Color of the input outline when focused
}

/* Default colors for light and dark themes */

export const lightTheme: DefaultTheme = {
    bg: "#f3f3f3",
    text: "#111111",
    inputBorder: "green",
    label: "#666",
    labelFocus: "green",
    outline: "rgb(61,240,61)",
};

export const darkTheme: DefaultTheme = {
    bg: "#333333",
    text: "#f5f5f5",
    inputBorder: "#66ff66",
    label: "#eeeeee",
    labelFocus: "#66ff66",
    outline: "#66ff66",
};
```

## MIT LICENSEd

---

## Gotcha section 😏😏 { Ignore if you are a serious person by nature }

-   **NOReact** is read as `Naming Order React`
-   **@reignite/no-react** is read as `At Re-Ignite slash naming order react`
-   **@reignite/no-core** is read as `At Re-Ignite slash naming order core`

Oops — I know you have been reading it as literal `no`🤣🤣