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

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 npm library to customise your own UI.

Usage

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 |

// 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🤣🤣