Modal example (click on the button to close):

```js
const ModalBody = require("./ModalBody").default;
const ModalHeader = require("./ModalHeader").default;
initialState = { isOpen: false };

<div>
	<button onClick={() => setState({ isOpen: true })}>Open modal</button>

	{state.isOpen && (
		<Modal close={() => setState({ isOpen: false })} bgDismiss={false}>
			<ModalHeader>I am the header</ModalHeader>
			<ModalBody>
				<button onClick={() => setState({ isOpen: false })}>
					Close in body
				</button>
			</ModalBody>
		</Modal>
	)}
</div>;
```

Modal example (click outside to close):

```js
const ModalBody = require("./ModalBody").default;
const ModalHeader = require("./ModalHeader").default;
initialState = { isOpen: false };

<div>
	<button onClick={() => setState({ isOpen: true })}>Open modal</button>

	{state.isOpen && (
		<Modal close={() => setState({ isOpen: false })} bgDismiss>
			<ModalHeader>I am the header</ModalHeader>
			<ModalBody>Click outside to close</ModalBody>
		</Modal>
	)}
</div>;
```

Modal without header (does not have close button):

```js
const ModalBody = require("./ModalBody").default;
const ModalHeader = require("./ModalHeader").default;
initialState = { isOpen: false };

<div>
	<button onClick={() => setState({ isOpen: true })}>Open modal</button>

	{state.isOpen && (
		<Modal
			isOpen={state.isOpen}
			close={() => setState({ isOpen: false })}
			bgDismiss
		>
			<ModalBody>Click outside to close</ModalBody>
		</Modal>
	)}
</div>;
```

Modal with overflow

```js
const ModalBody = require("./ModalBody").default;
const ModalHeader = require("./ModalHeader").default;
const Time = require("../TimePicker/Time").default;
initialState = { isOpen: false };

<div>
	<button onClick={() => setState({ isOpen: true })}>Open modal</button>

	{state.isOpen && (
		<Modal
			close={() => setState({ isOpen: false })}
			bgDismiss
			allowOverflow
		>
			<ModalHeader>Overflow modal</ModalHeader>
			<ModalBody>
				<p>
					This time picker will render outside the constrains of the
					modal screen
				</p>
				<Time hour={10} minute={0} onTimeSet={() => {}} />
			</ModalBody>
		</Modal>
	)}
</div>;
```