components-packaging v1.2.6

Dynamic Example Rendering for React

This package provides a dynamic example rendering system for React applications, allowing you to display different components based on URL query parameters. The system uses the binpkg utility for example management and rendering.

Installation

To get started, install the package and its dependencies:

npm install your-package-name binpkg react-router-dom

Project Structure

your-project/
├── examples/
│   ├── home-examples/
│   │   ├── index.ts       # Export home examples
│   │   └── home.tsx       # Example components
│   └── dashboard-examples/
│       └── ...           # Additional examples
└── src/
    └── index.js          # Main entry point

Basic Usage

1. Create Examples Add your components to the example directories:

// examples/home-examples/home.tsx
export const HomePageExample = () => <div>Welcome to our home page!</div>;
export const ContactExample = () => <div>Contact us at: info@example.com</div>;

2. Configure Example Renderer Set up your main component to render the examples dynamically:

// src/index.js
import React from 'react';
import { useSearchParams } from 'react-router-dom';
import * as HomeExamples from "../examples/home-examples";
import { IExampleMap, ReactExampleTagRenderer } from 'binpkg';

const reactExamples: IExampleMap = {
  home: {
    HomePageExample: HomeExamples.HomePageExample,
    ContactExample: HomeExamples.ContactExample
  }
};

const reactExample = new ReactExampleTagRenderer(reactExamples, (exampleName) => (
  <div>Example {exampleName} not found</div>
));

const HomePage: React.FC = () => {
  const [searchParams] = useSearchParams();
  const exampleName = searchParams.get('example') || 'default';

  return (
    <>
      {reactExample.render({
        value: 'home',  // Package name
        data: { example: exampleName }
      })}
    </>
  );
};

export default HomePage;

3. Query Parameters Control The component uses URL query parameters to determine which example to display:

• ?example=HomePageExample - Shows the HomePageExample component.
• ?example=ContactExample - Shows the ContactExample component.

4. Example Configuration You can configure multiple example packages by extending the reactExamples object:

// Add dashboard examples
import * as DashboardExamples from "./examples/dashboard-examples";
const reactExamples: IExampleMap = {
  home: {
    HomePageExample: HomeExamples.HomePageExample,
    ContactExample: HomeExamples.ContactExample
  },
  dashboard: {
    AnalyticsExample: DashboardExamples.AnalyticsDashboard,
    UserExample: DashboardExamples.UserDashboard
  }
};

// Usage with query params:
// ?package=dashboard&example=AnalyticsExample

License

This project is licensed under the MIT License. See the LICENSE file for details.

Key points:

• Installation: Install necessary dependencies (react-router-dom, binpkg).
• Project Structure: Defines where the example components and configurations should be placed.
• Basic Usage: Shows how to create and render examples based on query parameters.