@viktor998/use-dev v1.0.7

The purpose of this package is to be able to publish based on your environment

npm i @viktor998/use-dev@latest

Setup

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>
);

Heading

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