📦 react-container-validator

A lightweight React + TypeScript library for validating ISO 6346 container numbers. Perfect for logistics apps, depots, shipping lines, and any system requiring accurate container number validation.

🚀 Features

• 🔢 ISO 6346 compliant validation
• 🔍 Accurate check digit calculation
• 🧹 Auto uppercase & character sanitizing
• ⚛️ Ready-to-use React validation component
• 🧠 Fully documented TypeScript API
• ⚡ Lightweight & fast (under 5 KB)
• 📦 ESM + CJS builds

📥 Installation

npm install react-container-validator

🧪 Quick Start

1. Validate a container number

import { validateContainerNumber } from "react-container-validator";

console.log(validateContainerNumber("MSKU1234567")); // true

2. Generate check digit

import { getCheckDigit } from "react-container-validator";

console.log(getCheckDigit("MSKU123456")); // 7

3. Use the built-in React validation component

import { ContainerValidator } from "react-container-validator";

export default function App() {
  return (
    <ContainerValidator
      onValid={(val) => console.log("VALID:", val)}
      onInvalid={(val) => console.log("INVALID:", val)}
    />
  );
}

📘 API Documentation

validateContainerNumber(value: string): boolean

Validates a container number using ISO 6346 logic:

Rules:

• 4 letters (owner + category)
• 6 digits (serial number)
• 1 check digit (automatically validated)
• Total length = 11 characters

Example:

validateContainerNumber("MSKU1234567"); // true
validateContainerNumber("MSKU1234561"); // false

getCheckDigit(value: string): number | null

Returns the correct check digit from a 10-character container number.

Example:

getCheckDigit("MSKU123456"); // -> 7

<ContainerValidator />

Real-time validator with clean UI and colored feedback.

Props:

| Prop | Type | Description | |------|------|-------------| | onValid | (value: string) => void | Called when input becomes valid | | onInvalid | (value: string) => void | Called when input becomes invalid |

Example:

<ContainerValidator
  onValid={(v) => alert("VALID: " + v)}
  onInvalid={(v) => console.log("Invalid:", v)}
/>

Install dependencies:

npm install

Start development:

npm run dev

Build library:

npm run build

To test this library locally in another project:

npm run build
npm pack

This generates a file like: react-container-validator-1.0.0.tgz

Install it in your test React app:

npm install ../react-container-validator-1.0.0.tgz

🤝 Contributing

Pull requests and improvements are welcome!

📄 License

MIT © 2025 Bill Jeferson Nababan