https://github.com/coffezilla/react-bhx-modal-custom

Simple custom modal in Typescript for ReactJS project - made with create-react-app
https://github.com/coffezilla/react-bhx-modal-custom

custom-modal javascript-modal modal open-source typescript-modal

Last synced: 4 days ago
JSON representation

Simple custom modal in Typescript for ReactJS project - made with create-react-app

• Host: GitHub
• URL: https://github.com/coffezilla/react-bhx-modal-custom
• Owner: coffezilla
• Created: 2021-09-01T20:09:09.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T20:03:33.000Z (almost 2 years ago)
• Last Synced: 2024-04-28T20:24:39.917Z (7 months ago)
• Topics: custom-modal, javascript-modal, modal, open-source, typescript-modal
• Language: TypeScript
• Homepage: https://react-bhx-modal-custom.netlify.app/
• Size: 593 KB
• Stars: 6
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-bhx-modal-custom

This modal is very useful for all kind of React projects. It's really simple and clean that make the basic modal behaviour for you.

## Feat

- Typescript

- React ( sample is made using create-react-app )

## How to use

To use this simple modal, add the **ModalCustom** folder inside the component's folder of your project.

To call your modal simple add a button:

```tsx

 openModal('MY_MODAL')}>

	Open My Sample Modal

```

Configure your type for Typescript purpose

```tsx

// type

type modalIndex = 'MY_MODAL';

function App() {

[...]

	const [modalState, setModalState] = useState({

		MY_MODAL: { status: false },

	});

	const openModal = (modalName: modalIndex) => {

		setModalState({ ...modalState, [modalName]: { status: true } });

	};

	const closeModal = (modalName: modalIndex) => {

		const documentBody: HTMLBodyElement | null = document.querySelector('body');

		if (documentBody !== null) {

			documentBody.className = '';

		}

		setModalState({ ...modalState, [modalName]: { status: false } });

	};

	

[...]

```

## Configure the content of your modal

Put the ModalCustom tag inside your component and add the modal property with a unique name.

```tsx

	
This is my Modal Custom

	
You can close this modal using the "ESCAPE KEY"

	
You can close this modal clicking on the outside area

	
You can close this clicking on the "CLOSE BUTTON"

	 closeModal('MY_MODAL')}>

		CLOSE BUTTON

	


```

Example

![custom-modal.gif](react-bhx-modal-custom%20b57a599b545341df9c7560db5f9d3354/custom-modal.gif)