# @ousshmi/react-modal > A Modal React components ready to use Latest version **0.1.8** (published 2022-09-05) · ISC license · 0 weekly downloads ## Install ```sh npm install @ousshmi/react-modal pnpm add @ousshmi/react-modal yarn add @ousshmi/react-modal bun add @ousshmi/react-modal ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.8 | | Published | 2022-09-05 | | First published | 2022-09-05 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 12.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | DevDevas | | Maintainers | ousshmi | | Keywords | react, components, modal | ## Links - npm: https://www.npmjs.com/package/@ousshmi/react-modal - Repository: https://github.com/Devdevas/Modal-React-Plugin - Homepage: https://github.com/Devdevas/Modal-React-Plugin#readme - Issues: https://github.com/Devdevas/Modal-React-Plugin/issues - npm.io page: https://npm.io/package/@ousshmi/react-modal ## Dependencies (8) - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.5 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.3.0 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.8 (latest) — 2022-09-05 - 0.1.7 — 2022-09-05 - 0.1.6 — 2022-09-05 - 0.1.4 — 2022-09-05 - 0.1.3 — 2022-09-05 - 0.1.2 — 2022-09-05 - 0.1.1 — 2022-09-05 - 0.1.0 — 2022-09-05 - 0.1.5 — 2022-09-05 ## README ## A React modal npm package ### Install #### Using npm: `$npm install @ousshmi/react-modal` #### Using yarn: `$yarn add @ousshmi/react-modal` ### Usage ##### In a React app, import and use the Modal components: `import Modal from '@ousshmi/react-modal'` #### Modal props | Name | Type | Description | | ---------------- | -------- | -------------------------------------------------------------------------- | | show | boolean | Show/Hide the modal | | onClose | function | Use this function to set show value to 'false' and close the modal | | title | string | Customize the title of the modal | | message | string | Customize the message of the modal | | closeButton | boolean | Show/Hide the close button | | closeIcon | string | A path to a close icon you want to use when 'closeButton = {false}' | | addNewButton | boolean | Show/Hide a new button, If 'true' a new button will be added | | newButtonText | string | When 'addNewButton={true}' you could customize the text of the new button | | onClickNewButton | function | Use this function to do whatever you want after clicking on the new button | #### Modal style props | Name | Type | Description | | ------------------ | ------ | ---------------------------------------------------------------- | | wrapperBackground | string | A normal CSS values | | margin | string | A normal CSS values | | width | string | A normal CSS values | | maxWidth | string | A normal CSS values | | border | string | A normal CSS values | | borderRadius | string | Customize CSS values and use (overFlow : "hidden") to see result | | overflow | string | A normal CSS values | | headerBackground | string | A normal CSS values | | headerPadding | string | A normal CSS values | | headerFont | string | Everything about the font, example values: "bold 15px roboto" | | headertextColor | string | A normal CSS values | | bodyBackground | string | A normal CSS values | | bodyPadding | string | A normal CSS values | | bodyFont | string | Everything about the font, example values: "bold 15px roboto" | | bodytextColor | string | A normal CSS values | | bodyBorderTop | string | A normal CSS values | | bodyBorderBottom | string | A normal CSS values | | footerPadding | string | A normal CSS values | | footerBackground | string | A normal CSS values | | buttonPadding | string | A normal CSS values | | buttonBackground | string | A normal CSS values | | buttonBorder | string | A normal CSS values | | buttonBorderRadius | string | A normal CSS values | | buttonFont | string | Everything about the font, example values: "bold 15px roboto" | | buttonTextColor | string | A normal CSS values | | buttonMargin | string | A normal CSS values | #### Example usage --- import { useState } from "react"; import Modal from "./components/Modal"; function App() { const [show, setShow] = useState(false); return (
setShow(false)} show={show} message="The modal is opened!" closeButton={true} borderRadius="5px" overflow="hidden" headerBackground="gray" addNewButton newButtonText="Go to..." />
); } export default App; --- --- _Source: https://npm.io/package/@ousshmi/react-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._