components-packaging

how to use the package

index.js

import React from 'react'
import * as HomeExamples from "./examples/home-examples";
import * as DashboardExamples from "./examples/dashboard-examples";
import { IExampleMap, ReactExampleTagRenderer, getPackageExamples, DetectQueryParamChange } from 'binpkg';

const reactExamples: IExampleMap = (() => {
    return {
        ...getPackageExamples("home", HomeExamples as any),
    };
})();

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

const HomePage: React.FC = () => {
    
    const [searchParams] = useSearchParams();

    // Get the value of the specific query parameter you want to detect
    const paramValue = searchParams.get(yourQueryParamName);
    const paramExist = searchParams.has(yourQueryParamName);
    const packages = Object.keys(reactExamples);
    const query = qs.parse(searchParams.toString());

    const [current, setCurrent] = React.useState<string>(initPackageName(packages, paramExist, `${paramValue}`));

    React.useEffect(() => {
        // Handle the change in the query parameter value
        console.log(`Query parameter "yourQueryParamName" changed to: ${paramValue}`);

        // You can perform further actions based on the changed value here
        paramExist && setCurrent(initPackageName(packages, paramExist, `${paramValue}`));
    }, [paramExist, paramValue]);

    return (
        <>
            {reactExample.render({
                value: current,
                data: query,
            })}
        </>
    )
}

export default HomePage

path of the packages and how to use it:

examples/home-examples/index.ts

export * from "./home"

examples/home-examples/home.tsx

export const Home = () => <>home</>