1.1.12 • Published 1 year ago
modal-component-oc v1.1.12
modal-component-oc
A modal in the same React.js component. It can be used as a modal, a toast or show a notification. It is slightly customizable.
Top technologies
Installation
Install using npm:
npm install --save modal-component-ocUsage
React.js (version: 18.2.0) and React Dom (version: 18.2.0) are peer dependencies for react-datetime. As well as FontAwesome(version: 6.5.1) if you want to use the isCloseBtn prop set true. These dependencies are not installed along with modal-component-oc automatically, but your project needs to have them installed in order to make the Modal component work.
// Import the library
import { Modal } from "modal-component-oc";
// return it from your components
return <Modal>{children}</Modal>;API
Below we have all the props that we can use with the <Modal> component. There are also some methods that can be used imperatively.
| Name | Type | Default | Description |
|---|---|---|---|
| isOpen | Boolean | false | (Optional) Represents the display of component at the beginning. This props is optional. If it is not called, the component will take the default value false and won't be shown in project. |
| onClose | Function | empty function | Callback trigger when the close zone has been clicked. The callback receives boolean variable as only parameter. Active this function will send a notification to close the Modal in the parent component. So that the parent component can know when the Modal closes and has suitable action. |
| isCloseBtn | Boolean | true | (Optional) By default we have a close button with icon (X) at the top right corner of modal. This is optional props, if we dont want to show this button, let call this props and set it to false. |
| backgroundColor | string | | |
| textColor | string | | |
| closeText | string | | |
| children | ReactNode | Define the content that will be shown in the Modal. |
Customize the Modal Appearance
It is possible to customize the way that the Modal is displayed:
<Modal
isOpen={true}
onClose={() => setModalOpen(true)}
isCloseBtn={true}
closeText={"Close"}
backgroundColor="lightgray"
textColor="darkblue"
>
<div>
<h3>Employee Created!</h3>
<p>
You can go to
<Link to={"/list"} className="link-text">
here
</Link>
to review list of employee list
</p>
</div>
</Modal>