Classpass

Classpass is a simple utility library for creating React components with default class names. It provides a convenient way to define and apply classes to HTML elements in your React applications.

Installation

You can install Classpass using npm:

npm install classpass-react

Usage

To use Classpass in your React project, import the classpass-react function from the package:

import classpass from "classpass-react";

The classpass function allows you to create components with default class names. You can use it to define components for various HTML elements:

// With each class as an indivudual parameter
const Container = classpass.div("container", "padding-4");

// Or like "styled-components"
const SecondaryButton = classpass.button`bg-slate-200 mt-2`;

In the above example, Container is a component that renders a <div> element with the default classes container and padding-4. Similarly, SecondaryButton is a component that renders a <button> element with the default (tailwind) classes bg-slate-200 and mt-2.

The list of classes applied supports anything that clsx supports.

You can then use these components in your React code:

function App() {
  return (
    <Container>
      <h1>Welcome to my app</h1>
      <SecondaryButton onClick={() => console.log("Clicked!")}>
        Click me
      </SecondaryButton>
    </Container>
  );
}

Classpass supports a wide range of HTML elements, including div, span, button, a, img, and more. You can find the complete list of supported elements in the types.ts file.

TypeScript Support

Classpass is written in TypeScript and provides type definitions out of the box. It uses the HTML attribute types from React to ensure type safety when defining components.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.