📢 Bulletin component for React
npm i --save @sodalife/react-bulletin
Also make sure that the following peerDependencies are installed:
npm i --save react react-dom prop-types rc-animate
import React from 'react'
import ReactDOM from 'react-dom'
import { Bulletin } from '@sodalife/react-bulletin'
ReactDOM.render(
<Bulletin identity="20180401.1" message="nothing important happened today" />,
document.getElementById('#app')
)
import React from 'react'
import ReactDOM from 'react-dom'
import { Bulletin } from '@sodalife/react-bulletin'
let bulletin = {
identity: '20180401.1',
icon: 'https://raw.githubusercontent.com/sodalife/react-bulletin/master/storybook/assets/icon-rocket.svg',
title: 'BREAKING NEWS',
okText: 'OK 👌',
message: 'Nothing Important Happened Today',
className: 'custom-class',
onOk() {
console.log('ok')
},
}
ReactDOM.render(<Bulletin {...bulletin} />, document.getElementById('#app'))
import React from 'react'
import ReactDOM from 'react-dom'
import { Bulletin } from '@sodalife/react-bulletin'
import fetch from 'unfetch'
import md from 'md'
import xss from 'xss'
const REMOTE_BULLET_API =
'https://cors-anywhere.herokuapp.com/https://pastebin.com/raw/LWY5xHmy'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
bulletin: {},
}
}
componentDidMount() {
this.fetch()
}
async fetch() {
let bulletin = await fetch(REMOTE_BULLET_API).then(response =>
response.json()
)
// note: prevent xss attacks here
bulletin.message = (
<div dangerouslySetInnerHTML={{ __html: xss(md(bulletin.message)) }} />
)
this.setState({ bulletin })
}
render() {
return <Bulletin key={this.state.bulletin.identity} {...this.state.bulletin} />
}
}
ReactDOM.render(<App />, document.getElementById('#app'))
import React from 'react'
import ReactDOM from 'react-dom'
import { StatelessBulletin } from '@sodalife/react-bulletin'
let bulletin = {
identity: '20180401.1',
icon: 'https://raw.githubusercontent.com/sodalife/react-bulletin/master/storybook/assets/icon-rocket.svg',
title: 'BREAKING NEWS',
okText: 'OK 👌',
message: 'Nothing Important Happened Today',
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
read: false,
}
}
render() {
return (
<StatelessBulletin
{...bulletin}
visible={!this.state.read}
onOk={() => this.setState({ read: true })}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('#app'))
Check Storybook online and the sources.
Or run storybook on your own machine:
-
Clone repository:
git clone [email protected]:sodalife/react-bulletin.git && cd react-bulletin
-
Install dependencies:
npm i
-
Run Storybook-server:
npm run storybook
Prop | Type | Default |
---|---|---|
identity | String | undefined |
icon | String | undefined |
title | String | 'BREAKING NEWS' |
message | Node | undefined |
okText | String | 'OK' |
className | String | undefined |
onOk | Function | () => {} |
-
clear()
Clears cache from localStorage
Prop | Type | Default |
---|---|---|
identity | String | undefined |
icon | String | undefined |
title | String | 'BREAKING NEWS' |
message | Node | undefined |
okText | String | 'OK' |
className | String | undefined |
onOk | Function | () => {} |
visible | Boolean | true |