State, Utilities, and Constants

Where shared logic lives

Using helpers

Before writing logic in your component, check if a helper already exists in helpers.tsx. Common helpers:

  • Text transformations (uppercase, lowercase, etc.)

  • Data validation

  • Formatting utilities

If you need something that could be reused, add it to helpers.tsx.

Tool configuration

Every tool needs an entry in developmentToolsConstant.tsx. This tells the app:

  • The tool's slug (URL identifier)

  • Display name and description

  • Category (Text, Code, Data, Color, etc.)

  • Which component to render

{
  slug: "json-formatter",
  name: "JSON Formatter",
  description: "Format and validate JSON",
  category: "code",
  component: JsonFormatter,
}

Using context for state

Global state like theme or layout preferences lives in app/contexts/arrow-up-right:

  • themeContext.tsx — Dark/light mode

  • layoutContexts.tsx — Layout state

Use these for state that affects multiple tools. Small, single-tool state can stay in the component.

Last updated