Component Context

The Component Context provides a way to customize and override components throughout your application. This is particularly useful for creating themed versions of components or adding additional functionality to existing components.

Basic Usage


import { ComponentProvider, Button } from "@codedazur/fusion-ui";
 
// Create a custom Button component
const CustomButton = (props) => (
  <Button {...props} style={{ borderRadius: "10px" }} />
);
 
function App() {
  return (
    <ComponentProvider
      components={{
        Button: CustomButton,
      }}
    >
      {/* This will use the CustomButton */}
      <Button>Click me</Button>
    </ComponentProvider>
  );
}

Nested Providers

Component providers can be nested, with child providers overriding components from parent providers:


import { ComponentProvider, Button, Text } from "@codedazur/fusion-ui";
 
const CustomButton = (props) => (
  <Button {...props} style={{ borderRadius: "10px" }} />
);
 
const CustomText = (props) => (
  <Text {...props} style={{ fontFamily: "Comic Sans MS" }} />
);
 
function App() {
  return (
    <ComponentProvider
      components={{
        Button: CustomButton,
      }}
    >
      {/* This section uses CustomButton */}
      <div>
        <Button>Rounded Button</Button>
        <Text>Normal Text</Text>
      </div>
 
      <ComponentProvider
        components={{
          Text: CustomText,
        }}
      >
        {/* This section uses both CustomButton and CustomText */}
        <div>
          <Button>Rounded Button</Button>
          <Text>Comic Sans Text</Text>
        </div>
      </ComponentProvider>
    </ComponentProvider>
  );
}

Accessing Components in Custom Components

You can use the useComponents hook to access the current components:


import { useComponents } from "@codedazur/fusion-ui";
 
function CustomComponent() {
  const { Button, Text } = useComponents();
 
  return (
    <div>
      <Text>This is some text</Text>
      <Button>Click me</Button>
    </div>
  );
}

Reference

ComponentProvider Props

Name	Type	Default	Description
`components`	`Record<string, ComponentType>`	`{}`	Object containing component overrides
`children`	`ReactNode`	-	Content to render