inite-component

What problem does it solve?

Ensures React components in the INITE project follow a consistent structure, styling, translation, and lifecycle handling so simulations and UI parts integrate predictably and are maintainable.

Core Features & Use Cases

• Component pattern: Functional components with hooks, mandatory cleanup in useEffect for intervals/listeners/RAF, and default export conventions.
• Styling & i18n: Enforce Bootstrap 5 usage, react-i18next for all UI text, and separate kebab-case CSS files per component.
• Simulation support: Provide a SimulationFrame iframe wrapper pattern for standalone HTML5 simulations and a SimulationList pattern for registering and linking simulations.
• Developer checklist: Route registration in App.js, translation key additions, and a quick checklist for producing production-ready components.

Quick Start

Create a new functional React component that uses useTranslation from react-i18next, places styles in a separate kebab-case CSS file, includes useEffect cleanup for timers or RAF, exports default, and add its route to App.js.