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</>
