Dynamic Class Wrapper

dynamic-class-wrapper is a customizable wrapper component for Next.js that dynamically applies classes based on the route, theme mode, device size, and optional context.

Installation

Install my-project with npm

npm install dynamic-class-wrapper

Basic Usage

You can wrap your content with the DynamicClassWrapper component and set conditional classes based on specific routes, themes, or screen sizes.

import DynamicClassWrapper from "dynamic-class-wrapper";

export default function MyApp() {
  return (
    <DynamicClassWrapper
      applyClassFor="/about"
      className="about-class"
      fallbackClassName="default-class"
    >
      <main>Your content here</main>
    </DynamicClassWrapper>
  );
}

Props

| Prop | Type | Description | |------------------|------------------------------|----------------------------------------------------------| | className | string | Classes to apply for a specific route. | | fallbackClassName | string | Classes to apply for other routes. | | applyClassFor | string | Route for which className is applied. | | darkModeClass | string | Classes to apply in dark mode. | | lightModeClass | string | Classes to apply in light mode. | | mobileClass | string | Classes to apply on mobile devices. | | tabletClass | string | Classes to apply on tablets. | | desktopClass | string | Classes to apply on desktop devices. | | contextClassMap| Record<string, string> | Class map for each context, e.g., {home: "home-bg"}. | | context | string | Context defining the classes to apply. |

Examples

Example 1: Applying Classes Based on Route

Use applyClassFor to set a class for a specific route, and a fallback for others.

<DynamicClassWrapper
  applyClassFor="/about"
  className="bg-about-page"
  fallbackClassName="bg-default"
/>

Example 2: Applying Dark and Light Mode Classes

Combine darkModeClass and lightModeClass to adjust styles based on the current theme.

<DynamicClassWrapper
  darkModeClass="bg-dark-mode"
  lightModeClass="bg-light-mode"
/>

Example 3: Responsive Design with Mobile, Tablet, and Desktop Classes

Set device-specific classes with mobileClass, tabletClass, and desktopClass.

<DynamicClassWrapper
  mobileClass="bg-mobile"
  tabletClass="bg-tablet"
  desktopClass="bg-desktop"
/>

Example 4: Using Context to Define Specific Classes

Define classes based on the context of the page, such as home or about, for even more control.

<DynamicClassWrapper
  context="home"
  contextClassMap={{
    home: "bg-home-page",
    about: "bg-about-page",
  }}
/>

License

MIT