The purpose of this package is to be able to publish based on your environment
npm i @viktor998/use-dev@latest
In main.jsx file set up the DevProvider from "@viktor998/use-dev" and pass your dev prop
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { DevProvider } from "@viktor998/use-dev";
const isDev = import.meta.env.VITE_MODE === "staging" || false;
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<DevProvider dev={isDev}>
<App />
</DevProvider>
</React.StrictMode>
);
App.js
EXAMPLE 1
const menuItems = [
{ type: "label", value: "your path" },
{
...useDevWrapper({child : { type: "item", value: "Home", Icon: CaHome, path: "home" }}), // isDev ? then it will return the object else the value will be {}
},
{ type: "label", value: "your profile", path: "your-profile" },
{ type: "item", value: "Invoices", Icon: CaInvoices, path: "invoices" },
{
type: "item",
value: "Book Exam",
Icon: CaBookExams,
path: "book-exam",
},
];
EXAMPLE 2
<Button variant="contained" color="primary" onClick={() => useDevWrapper({child: () => exe("hello dev"), prodChild: () => exe("hello prod") })}>
HELLO WOLRD
</Button>
In this case the wrapper if we are in development environment will execute the function else ignores the execution
EXAMPLE 3
export function Main() {
const { useDevWrapper } = useDev();
const exe = (test) => {
console.log(test);
};
return (
<>
{useDevWrapper(
{
child: <Button variant="contained" color="primary" onClick={() => exe("hello world")}>
HELLO DEV
</Button>,
prodChild: <Button variant="contained" color="primary" onClick={() => exe("hello world")}>
HELLO PROD
</Button>,
options: {
showBadge: true // default is false
}
}
)}
</>
);
}
Will render the child only in development mode and in production will render the prodChild