react-modal-component
To begin using this package, follow these steps:
-
Step1: Go to the
node_modules
folder in your project and locate the folder nameddevtreasure-react-modal-component
. Inside that folder, copy themodal.tsx
file from the src folder. For the styles, copy themodal.module.css
file from the styles folder. -
Step2: Paste the
modal.tsx
file directly into your project's components folder. -
Step3: Paste the
modal.module.css
file into the styles folder of your project.
-
Step4: Make sure you have the
react-lazy-load-image-component
package installed in your project. -
Step5: In the package's src folder, locate the
state.tsx
file. Copy the state properties used and paste them into your own codebase.
Note: Only copy the state properties, not the entire function wrapper. The code should look something like this
const [modalState, setModalState] = useState({ isModal: false, message: "" });
- Step6: Go to the function folder located at
node_modules/devtreasure-react-modal-component
. Copy the show and hide functions from that folder and paste them into your codebase where you imported the modal from. - Step 7: Importing the style
No need to worry about this step as it's already done for you. Just make sure you change the path to match your project's file structure. For example, your style import could look something like this: /styles/modal.module.css
or /styles/animation/modal.module.css
.
Your full code should look something like this:
import {
LazyLoadImage,
LazyLoadComponent,
} from "react-lazy-load-image-component";
import { useState, useEffect, MouseEventHandler, lazy } from "react";
const ReactModalComponent = lazy(
() => import("../../components/function/modal/ReactModalComponent")
);
function App() {
const [modalState, setModalState] = useState({ isModal: false, message: "" });
const showModal = () => {
setModalState((prevState) => {
return {
...prevState,
isModal: true,
};
});
};
const hideModal = () => {
setModalState((prevState) => {
return {
...prevState,
isModal: false,
};
});
};
return (
<>
<LazyLoadComponent>
<ReactModalComponent
isModal={modalState.isModal}
performTwoFunctions={performTwoFunctions}
hideModal={hideModal}
/>
</LazyLoadComponent>
</>
);
}
export default App;
How to show the modal
To display your modal, please copy the code snippet below. Note that it doesn't have to be a button; you can use any HTML tags in your codebase.
<button id={"hello-world"} onClick={showModal}>
Show Modal
</button>
How to update Package
If you want to update the package simpley update using the following
npm | yarn | pnpm |
---|---|---|
$ npm update react-modal-component |
$ yarn upgrade react-modal-component |
$ pnpm up react-modal-component |
Note: In case there are significant changes to the code, please make sure to copy the updated code into your codebase again. . Note: You might see a function called
performTwoFunctions
. Please delete that. This was meant to pefrom two operations. When I was working on this........................................................................................... . Note: Please note that your codebase may be different from the example provided. The key is to import the component, the style, and call the necessary functions accordingly.