https://github.com/huwcarwyn/react-context-modals
Add modals anywhere using a simple hook or context
https://github.com/huwcarwyn/react-context-modals
context-api hooks modals react
Last synced: 11 months ago
JSON representation
Add modals anywhere using a simple hook or context
- Host: GitHub
- URL: https://github.com/huwcarwyn/react-context-modals
- Owner: huwcarwyn
- Created: 2019-10-26T17:16:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T14:06:54.000Z (over 1 year ago)
- Last Synced: 2025-08-02T06:25:51.646Z (11 months ago)
- Topics: context-api, hooks, modals, react
- Language: TypeScript
- Homepage:
- Size: 1.48 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Context Modals
React Context Modals allows you to very easily add flexible modals to any project, any component can be turned into a modal. Can be used either via the context API or by using the hook.
### Installation
```
npm install --save react-context-modals
```
or
```
yarn add react-context-modals
```
### Setup
To set up the library - import the modal CSS (or optionally roll your own), then wrap your app in the ModalProvider like so:
```
import { ModalProvider } from 'react-context-modals'
import 'react-context-modals/dist/main.css'
export const App = () => {
return (
// ...rest of your app
)
}
```
### Usage
With hooks:
```
import { useModal } from 'react-context-modals'
const BasicModal = ({ message }) => (
this is a very basic modal, with a message passed via props: {message}
)
const Example = props => {
const { showModal, hideModal } = useModal()
const showBasicModal = () => showModal(BasicModal, {
message: 'This message will be passed to the modal component'
})
return (
Open modal
)
}
```
With class based components:
```
import React, { Component } from 'react'
import { ModalConsumer } from 'react-context-modals'
const BasicModal = () =>
this is a very basic modal
class Example extends Component {
render() {
return (
{({ showModal, hideModal }) => (
showModal(BasicModal)}>Open modal
)}
)
}
}
```