Primitive 🧱

Hey there, Component Architect! 🏗️

The primitive module is the bedrock of your component library! It provides a set of base components (like Primitive.div, Primitive.button, Primitive.span, etc.) that act as enhanced versions of standard HTML elements.

Think of them as foundational Lego bricks 🧱 – simple, versatile, and essential for building more complex structures!

Why Primitives?

• asChild Prop: This is a super cool feature! If you pass asChild to a primitive, it will merge its own props and behavior with its direct child component, instead of rendering its own DOM element. This is amazing for building highly composable and flexible component APIs.
• Accessibility: Primitives can help enforce accessibility best practices or add default ARIA roles/attributes.
• Styling Consistency: They can be a central place to apply base styling or integrate with your styling solution.
• Event Composition: Might include utilities like composeEventHandlers to easily merge multiple event handlers.

Basic Usage

import { Primitive } from '@ryvora/react-primitive';

// Standard usage:
const MyButton = (props) => {
  return <Primitive.button {...props} style={{ backgroundColor: 'blue', color: 'white' }} />;
};

// Using asChild:
const FancyLink = React.forwardRef(({ children, ...props }, ref) => {
  return (
    <Primitive.a {...props} ref={ref} style={{ textDecoration: 'underline', color: 'purple' }}>
      {children}
    </Primitive.a>
  );
});

const MyComponent = () => {
  return (
    <Primitive.div asChild style={{ padding: '10px', border: '1px solid red' }}>
      <FancyLink href="#">
        This will be a link, styled by both Primitive.div and FancyLink!
      </FancyLink>
    </Primitive.div>
  );
};

Build solid foundations for your UI with Primitives! 🛠️