custom-modal-component

A customizable modal component for React.

This component is a modal that can be used to display any content. It provides a flexible and customizable solution for creating modals in your React applications.

Prerequisites

Before using this component, make sure you have React and React DOM installed in your project.

npm install react react-dom

Installation

You can install the package using npm, pnpm, or yarn:

npm install custom-modal-component
pnpm install custom-modal-component
yarn add custom-modal-component

Usage

import CustomModal from "custom-modal-component/dist/CustomModal";

// ...

function MyComponent() {
  const [showCustomModal, setShowCustomModal] = useState(false);

  return (
    <div>
      <CustomModal
        showCustomModal={showCustomModal}
        setShowCustomModal={setShowCustomModal}
        radius="10px"
        padding="20px"
        width="400px"
        height="300px"
        backgroundColor="#f1f1f1"
        color="#333333"
      >
        {/* Your content goes here */}
        {/* Example: */}
        <h1>Hello, world!</h1>
      </CustomModal>
    </div>
  );
}

export default MyComponent;

Props

The following props are available for the CustomModal component:

• showCustomModal (required): A boolean value indicating whether the modal should be shown.
• setShowCustomModal (required): A function from the useState hook to control the visibility of the modal.
• radius (optional): The border radius of the modal. Defaults to 5px.
• padding (optional): The padding of the modal. Defaults to 40px.
• width (optional): The width of the modal. Defaults to fit-content.
• height (optional): The height of the modal. Defaults to auto.
• backgroundColor (optional): The background color of the modal. Defaults to #ffffff.
• color (optional): The text color of the modal. Defaults to #000000.

Links

• npm package
• GitHub repository

License

This project is licensed under the MIT License.

For more information about the component and how to use it, please refer to the documentation and examples provided in this README. If you have any questions or need further assistance, feel free to reach out or visit the GitHub repository.