0.1.3 • Published 1 year ago
@zious/react-typescript-modal v0.1.3
React Typescript modal
Basic reusable and customizable modal for React apps.
Installation
import { Modal } from "@zious/react-typescript-modal";
Configuration
Required props:
showModal
: boolean from a useStatehideModal
: function to set boolean from useState in order to close or hide modal
Optional props:
srOnly
: boolean to set title and header visibilitytitle
: string to add titlecontent
: string or ReactNode to add contentbtnContent
: string or ReactNode to add button content
Customization/styling
With classnames:
modalClassName
: custom wrapper (including background effects) with your own classnamesboxClassName
: custom container with your own classnamesheaderClassName
: custom header with your own classnamestitleClassName
: custom title with your own classnamescontentClassName
: custom modal content with your own classnamesfooterClassName
: custom footer with your own classnamesbtnClassName
: custom button with your own classnames
With inline styles:
modalStyle
: object with css styles to custom wrapper (including background effects)boxStyle
: object with css styles to custom containerheaderStyle
: object with css styles to custom headertitleStyle
: object with css styles to custom titlecontentStyle
: object with css styles to custom contentfooterStyle
: object with css styles to custom footerbtnStyle
: object with css styles to custom button
Example
const YourComponent = () => {
const [show, setShow] = React.useState<boolean>();
return (
<>
<button onClick={() => setShow(true)}>Show modal</button>
<Modal
showModal={show}
title="Your modal title"
content="Your modal content"
btnContent="Next ➡ "
hideModal={() => setShow(false)}
/>
</>
);
};
export default YourComponent;
Overriding existing styles
If styling with classnames doesn't seem to work properly, you can try to bump specificity as follow:
.yourClassName.yourClassName {
background-color: blue;
}
const YourComponent = () => {
const [show, setShow] = React.useState<boolean>();
return (
<>
<button onClick={() => setShow(true)}>Show modal</button>
<Modal
showModal={show}
title="Your modal title"
content="Your modal content"
btnContent="Next ➡ "
hideModal={() => setShow(false)}
btnClassName="yourClassName"
/>
</>
);
};
export default YourComponent;
Built with
A JavaScript library for building user interfaces