atom

A utility function for creating reusable React elements with merged Tailwind classes.

Installation

npm install @synergyeffect/react-atom

or with Yarn:

npm install @synergyeffect/react-atom

How It Works

• The atom function takes a React element as an argument.
• Returns a curried function that accepts props.
• Merges the className attribute using tailwind-merge, ensuring class overrides work correctly.

Example with Multiple Components

const Button = atom(<button className="px-4 py-2 rounded bg-blue-500 text-white" />);

function App() {
  return (
    <div>
      <Button className="bg-red-500">Click Me</Button>
    </div>
  );
}

Why Use atom?

• Encapsulates UI Elements: Define base elements and modify them dynamically.
• Tailwind-Class Merging: Prevents class conflicts when overriding styles.
• TypeScript Support: Maintains proper types for props.

TypeScript Support

The function ensures proper type inference for JSX intrinsic elements.

const Link = atom<"a">(<a href="#" className="text-blue-500" />);

<Link href="/about" className="font-bold" />;

License

MIT