React hook for Material-UI dialog.
yarn add use-material-ui-dialog
Wrap your app inside the DialogProvider component.
import React from 'react'
import { DialogProvider } from 'use-material-ui-dialog'
const App = () => {
return (
<DialogProvider>
{/* ... */}
</DialogProvider>
)
}
export default App
Call the useDialog
hook in the components.
import React from 'react'
import { Button } from '@material-ui/core'
import { useDialog } from 'use-material-ui-dialog'
export const MyComponent: React.FunctionComponent = () => {
const dialog = useDialog()
const handleClick = () => {
dialog.openAlert({
title: 'ALERT',
message: 'this is alert',
color: 'secondary'
})
}
return (
<Button onClick={handleClick}>
Click Me
</Button>
)
}
Use the DialogContext.Provider
object in the components.
import React from 'react'
import { AppProps } from 'next/app'
import { DialogProvider } from 'use-material-ui-dialog'
export default class Welcome extends React.Component {
constructor(props: AppProps) {
super(props)
this.context = null
}
componentDidMount() {
this.context.openMessage({
title: 'ALERT',
message: 'this is alert'
})
}
render() {
return (
<DialogProvider
context={(context) => this.context = context}
>
</DialogProvider>
)
}
}