This project was bootstrapped with Create React App
The Modal Package is a lightweight and customizable package that allows you to easily display modal windows in your React applications. With this package, you can create and manage modal windows with minimal effort, providing a seamless user experience.
##Installation To install the Modal Package, use the following command:
npm install modal-package-martin
This project needs to use useState
with a variable showModal
to toggle the modal visibility
const [showModal, setModal] = useState(false);
and a function to change its visibility
const handleClick = () => {
setModal(() => !showModal)
}
The modal accepts three props:
-
showModal
(a boolean that respresents the modal visibility) -
onClick
(a fn to change the modal visibility) -
children
(the elements that will be displayed in the modal content)
import Modal from 'modal-package-martin-test/dist/Modal'
// Example usage
const App = () => {
const [showModal, setModal] = useState(false)
const handleClick = () => {
// Perform action to toggle modal
setModal(() => !showModal)
}
return (
<div className="container">
<button onClick={handleClick}>Show Modal</button>
<Modal showModal={showModal} onClick={handleClick}>
{/* Modal content goes here */}
</Modal>
</div>
)
}
Recomended html structure:
<>
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
</div>
<div className="modal-body">
<p>Modal body text goes here.</p>
</div>
</>
The classes "modal-header", "modal-title" and "modal-body" already have some default css rules than can be overridden using inle styling or regular a simple css file that targets these classes
{
"name": "modal-package",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": ["react-app", "react-app/jest"]
},
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1"
},
"main": "dist/index.js",
"module": "dist/index.js",
"files": ["dist", "README.md"],
"repository": {
"type": "git",
"url": "URL_OF_YOUR_REPOSITORY"
}
}
The Modal Package has the following dependencies:
- @testing-library/jest-dom: "^5.16.5"
- @testing-library/react: "^13.4.0"
- @testing-library/user-event: "^13.5.0"
- web-vitals: "^2.1.4"
The Modal Package has the following dev dependencies:
- babel-cli: "^6.26.0"
- react: "^18.2.0"
- react-dom: "^18.2.0"
- react-scripts: "5.0.1"
The Modal Package repository can be found at