反应提醒
反应提醒
演示
安装
$ npm install --save @blaumaus/react-alert
模板
需要时可以提供自己的警戒模板. 否则你只能插上以下一个:
请随意提交您自己的模板链接的 PR .
要启动, 请尝试安装基本操作 :
$ npm install --save react-alert react-alert-template-basic
同伴依赖关系
此软件包预计会有以下对等依赖性:
"react": "^16.8.1"
"react-dom": "^16.8.1"
一定要把这些也装好!
使用量
首先,您必须用提供方包起您的应用程序,给它提供提示模板和一些选项:
// index.js
import React from 'react'
import { render } from 'react-dom'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import App from './App'
// optional configuration
const options = {
// you can also just use 'bottom center'
position: positions.BOTTOM_CENTER,
timeout: 5000,
offset: '30px',
// you can also just use 'scale'
transition: transitions.SCALE
}
const Root = () => (
<AlertProvider template={AlertTemplate} {...options}>
<App />
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
然后导入 useAlert 显示提示的钩 :
// App.js
import React from 'react'
import { useAlert } from 'react-alert'
const App = () => {
const alert = useAlert()
return (
<button
onClick={() => {
alert.show('Oh look, an alert!')
}}
>
Show Alert
</button>
)
}
export default App
就这样!
您也可以使用 HOC 来:
import React from 'react'
import { withAlert } from 'react-alert'
const App = ({ alert }) => (
<button
onClick={() => {
alert.show('Oh look, an alert!')
}}
>
Show Alert
</button>
)
export default withAlert()(App)
选项
您可以通过下列选项作为道具 Provider数字 :
offset: PropTypes.string // the margin of each alert
position: PropTypes.oneOf([
'top left',
'top right',
'top center',
'middle left',
'middle',
'middle right',
'bottom left',
'bottom right',
'bottom center'
]) // the position of the alerts in the page
timeout: PropTypes.number // timeout to alert remove itself, if set to 0 it never removes itself
type: PropTypes.oneOf(['info', 'success', 'error']) // the default alert type used when calling this.props.alert.show
transition: PropTypes.oneOf(['fade', 'scale']) // the transition animation
containerStyle: PropTypes.Object // style to be applied in the alerts container
template: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired // the alert template to be used
注意位置、类型和过渡字符串作为常数可用,然后可以导入:
import { positions, transitions, types } from 'react-alert'
并且具有这样的价值:
export const positions = {
TOP_LEFT: 'top left',
TOP_CENTER: 'top center',
TOP_RIGHT: 'top right',
MIDDLE_LEFT: 'middle left',
MIDDLE: 'middle',
MIDDLE_RIGHT: 'middle right',
BOTTOM_LEFT: 'bottom left',
BOTTOM_CENTER: 'bottom center',
BOTTOM_RIGHT: 'bottom right'
}
export const types = {
INFO: 'info',
SUCCESS: 'success',
ERROR: 'error'
}
export const transitions = {
FADE: 'fade',
SCALE: 'scale'
}
缺省情况如下:
offset: '10px'
position: positions.TOP_CENTER
timeout: 0
type: types.INFO
transition: transitions.FADE,
containerStyle: {
zIndex: 100
}
这些选项将适用于所有提醒(请也查看 边框(中文(简体) )
阿庇语Name
拿到钱之后 alert 与 useAlert 钩子,这是你可以做的:
// show
const alert = alert.show('Some message', {
timeout: 2000, // custom timeout just for this one alert
type: 'success',
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// info
// just an alias to alert.show(msg, { type: 'info' })
const alert = alert.info('Some info', {
timeout: 2000, // custom timeout just for this one alert
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// success
// just an alias to alert.show(msg, { type: 'success' })
const alert = alert.success('Some success', {
timeout: 2000, // custom timeout just for this one alert
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// error
// just an alias to alert.show(msg, { type: 'error' })
const alert = alert.error('Some error', {
timeout: 2000, // custom timeout just for this one alert
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// remove
// use it to remove an alert programmatically
alert.remove(alert)
// removeAll
// use it to remove all alerts programmatically
alert.removeAll()
使用自定义提醒模板
如果你需要一个警报 就像你想要的, 你可以提供自己的模板! 这里有一个简单的例子:
import React from 'react'
import { render } from 'react-dom'
import { Provider as AlertProvider } from 'react-alert'
import App from './App'
// the style contains only the margin given as offset
// options contains all alert given options
// message is the alert message
// close is a function that closes the alert
const AlertTemplate = ({ style, options, message, close }) => (
<div style={style}>
{options.type === 'info' && '!'}
{options.type === 'success' && ':)'}
{options.type === 'error' && ':('}
{message}
<button onClick={close}>X</button>
</div>
)
const Root = () => (
<AlertProvider template={AlertTemplate}>
<App />
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
放松点,对吧?
使用组件作为信息
也可以通过一个组件作为信息,像这样:
alert.show(<div style={{ color: 'blue' }}>Some Message</div>)
同时在不同位置显示提示
首先,如果需要区分显示不同提示的逻辑 同时在一个项目和项目中使用多个警报器是可能的 筑巢过DOM树. 也可以使用不同的上下文来获取引用 分别对每种类型的警报.
import React, { createContext } from 'react'
import { render } from 'react-dom'
import { useAlert, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
const TopRightAlertContext = createContext()
const App = () => {
const alert = useAlert()
const topRightAlert = useAlert(TopRightAlertContext)
return (
<div>
<button onClick={() => alert.show('Oh look, an alert!')}>
Show Alert
</button>
<button
onClick={() =>
topRightAlert.show('Oh look, an alert in the top right corner!')
}
>
Show Top Right Alert
</button>
</div>
)
}
const Root = () => (
<AlertProvider template={AlertTemplate}>
<AlertProvider
template={AlertTemplate}
position={positions.TOP_RIGHT}
context={TopRightAlertContext}
>
<App />
</AlertProvider>
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
另一个用例是,当你不想 筑巢几个警报员 因为它会不知何故地使警报管理复杂化(例如,当你 需要显示三个以上不同位置的警报).
在此情况下,您可以直接将位置传递至警报. 警报没有
个人位置财产将取自提供方.
相反,将立场传给方法 show, (中文(简体) ), success, (中文(简体) ), info, (中文(简体) ), error 将
与提供方的立场重叠.
移交财产 position 看起来像这样:
alert.show('Oh look, an alert!', { position: positions.BOTTOM_LEFT })
在三个不同位置同时显示警报的一个例子:
import React from 'react'
import { render } from 'react-dom'
import {
Provider as AlertProvider,
useAlert,
positions,
transitions
} from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
const alertOptions = {
offset: '25px',
timeout: 3000,
transition: transitions.SCALE
}
const App = () => {
const alert = useAlert()
const showAlert = () => {
alert.show('Oh look, an alert!', { position: positions.BOTTOM_LEFT }) //alert will be shown in bottom left
alert.show('Oh look, an alert!', { position: positions.BOTTOM_RIGHT }) //alert will be shown in bottom right
alert.show('Oh look, an alert!') //alert will use the Provider's position `top right`
}
return <button onClick={showAlert}>Show Alert</button>
}
const Root = () => (
<AlertProvider template={AlertTemplate}>
<AlertProvider
template={AlertTemplate}
position={positions.TOP_RIGHT} //default position for all alerts without individual position
{...alertOptions}
>
<App />
</AlertProvider>
</AlertProvider>
)
render(<Root />, document.getElementById('root'))