Top
Notification API - API
Notification API
Props (52)
Callback Props (3)
Styling Props (16)
Methods (8)
Number|Bool
default: 3000
By default, notifications are dismissed after a configured delay (the default is 3000ms), as specified by this prop (in milliseconds). Specifying autoHideDelay=0 or autoHideDelay=false will make the notifications persistent, so the user will need to manually dismiss them by clicking the close button.
For more details on how to auto-hide or persist notifications, see Dismissing & persisting.
Notifications that are not auto-dismissed can be dismissed by the user, by clicking on the closeButton, or programmatically, by calling hideNotification.
Can be overridden by notification.autoHideDelay
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { autoHideDelay: 3000 }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <ComboBox
        style={{margin: 5, width: 150}}
        value={this.state.autoHideDelay? this.state.autoHideDelay: 'none'}
        onChange={(autoHideDelay) => this.setState({ autoHideDelay })}
        dataSource={[
          {id: false, label: 'none'},
          {id: 100, label: '100'},
          {id: 1000, label: '1000'},
          {id: 3000, label: '3000'},
        ]}
      >
      Auto-hide notifications
      </ComboBox>

      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        autoHideDelay={this.state.autoHideDelay}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
If true, the notifications in the <NotificationBoard /> will not be hidden after autoHideDelay milliseconds have elapsed if the user clicks them before this configured delay. .
When a notification is clicked, it gets "pinned". This is explicitly visible if the notification is configured with the pinButton.
Also see the opposite prop, hideOnClick.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props); this.state = { cancelAutoHideOnClick: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.cancelAutoHideOnClick}
        onChange={(cancelAutoHideOnClick) => this.setState({ cancelAutoHideOnClick }) }
      >
      Cancel auto-hide on click
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        pinButton
        cancelAutoHideOnClick={this.state.cancelAutoHideOnClick}
        delayAutoHideOnMouseOver={false}
        autoHideDelay={3000}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
When this is true, and notifications in the <NotificationBoard /> have a specified opacity, when the mouseenter event is triggered over a notification, its opacity will be set to 1 while the mouse is over the notification. Applies to all notifications in the <NotificationBoard />.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { clearOpacityOnMouseEnter: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.clearOpacityOnMouseEnter}
        onChange={(clearOpacityOnMouseEnter) => this.setState({ clearOpacityOnMouseEnter })}
      >Clear opacity on mouse enter</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        opacity={0.7}
        clearOpacityOnMouseEnter={this.state.clearOpacityOnMouseEnter}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn(buttonProps, props):React.Node
default: undefined
Configures the close button for all notifications in the <NotificationBoard />. Any valid React.Node is accepted, or a function that returns a React.Node.
In case a function is provided, the first param, buttonProps, can be mutated to add/modify/remove new properties or values to reflect the desired styling or rendering.
Can be overridden by notification.closeButton
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with custom close button</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        closeButton={(buttonProps, props) => <div {...buttonProps}
          className="" style={{
            cursor: 'pointer', fontSize: 10, padding: '0px 5px',
            display:'inline-block', background: '#0b7511', border: '1px solid magenta'
          }}
          >x</div>}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
If true, when the mouse is over a notification in the <NotificationBoard /> the autoHideDelay will be suspended, until the mouse is out of the notification, so it won't be closed until autoHideDelay milliseconds have elapsed since the mouse out event.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props); this.state = { delayAutoHideOnMouseOver: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.delayAutoHideOnMouseOver}
        onChange={(delayAutoHideOnMouseOver) => this.setState({ delayAutoHideOnMouseOver }) }
      >
      Delay auto hide on mouse over
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        delayAutoHideOnMouseOver={this.state.delayAutoHideOnMouseOver}
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
A height to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.height.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: 'Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.'
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        height={300}
        maxSize={{ width: 550 }}
      />
    </div>
  }
}

export default () => <App />
Bool|String
default: true
Whether the notifications in the <NotificationBoard /> should have an animation when they are hidden. Animation duration can be controlled via hideTransitionDuration.
Can be overridden by notification.hideAnimation.
When a string is specified, the CSS className of zippy-animation-[HIDE_ANIMATION] is appended before the hide animation starts and zippy-animation-[HIDE_ANIMATION]--active is appended when the hide animation is in progress. Specifying true, defaults to adding the zippy-animation-fade-out and zippy-animation-fade-out--active, respectively.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hideAnimation: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.hideAnimation}
        onChange={(hideAnimation) => this.setState({ hideAnimation }) }
      >
        Use hide animation
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
        hideAnimation={this.state.hideAnimation}
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
If true, the notifications in the <NotificationBoard /> will be dismissed when they are clicked. By default they are not, since they are configured with cancelAutoHideOnClick=true.
Can be overridden by notification.hideOnClick.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props); this.state = { hideOnClick: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.hideOnClick}
        onChange={(hideOnClick) => this.setState({ hideOnClick }) }
      >
      Hide on click
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification {this.state.hideOnClick? 'with': 'without'} hideOnClick</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        pinButton
        hideOnClick={this.state.hideOnClick}
      />
    </div>
  }
}

export default () => <App />
Number
default: 200
Affects the duration of the hideAnimation for all notifications in the <NotificationBoard />. Expressed in milliseconds.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hideTransitionDuration: 200 }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <ComboBox
        style={{margin: 5, width: 150}}
        value={this.state.hideTransitionDuration}
        onChange={(hideTransitionDuration) => this.setState({ hideTransitionDuration })}
        dataSource={[
          {id: 200, label: '200'},
          {id: 1000, label: '1000'},
          {id: 3000, label: '3000'},
        ]}
      >
        Hide transition duration
      </ComboBox>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        hideTransitionDuration={this.state.hideTransitionDuration}
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
React.Node
default: undefined
Configures an icon displayed next to the notification title for all notifications in the <NotificationBoard />. Any valid React.Node is accepted.
Can be overridden by notification.icon
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

import reactLogoIcon from './reactLogoIcon'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with custom icon</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        icon={<div style={{ marginRight: 10 }}>{reactLogoIcon}</div>}
      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
The maximum number of notifications that are accepted per stacking. Any older notifications that are over this limit are hidden when new notifications are displayed.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

let count = 1
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { stack: 3 }
  }
  showNotification() {
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the notification!</p>
    });
    count++
  }

  render() {
    return <div>
      <Button style={{margin: 5}} onClick={() => this.showNotification()}>Show notification</Button>
      <ComboBox
        style={{margin: 5, width: 150}}
        value={this.state.stack}
        onChange={value => this.setState({stack: value})}
        dataSource={[
          {id: 3, label: '3'},
          {id: 5, label: '5'},
          {id: 8, label: '8'},
        ]}
      >
        maxNotificationsPerStacking
      </ComboBox>
      <NotificationBoard
        ref={(b) => this.board = b}
        maxNotificationsPerStacking={this.state.stack}
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
A max size (width, height) to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.maxSize.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: 'Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.'
    });
    count++;
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        If maxSize prop to have effect, minSize needs to be specified also to override the default min-width: 300px.
      </div>
      <Button onClick={() => this.addNotification()}>
        Show notification with maxWidth: 200
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        maxSize={{ width: 200 }}
        minSize={{ width: 200 }}
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
A min size (width, height) to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.minSize.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: 'A short content'
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with minHeight: 400
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        minSize={{ height: 400 }}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether the notifications in the <NotificationBoard /> should reorder with a transition when their position changes.
Can be overridden by notification.moveTransition.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { moveTransition: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.moveTransition}
        onChange={(moveTransition) => this.setState({ moveTransition }) }
      >
      Use move transition
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
        moveTransition={this.state.moveTransition}
      />
    </div>
  }
}

export default () => <App />
Bool
default: undefined
When this is true, all the notifications in the <NotificationBoard /> have pointer-events: none so notifications cannot be clicked - any clicks and mouse/pointer events are not captured, but rather go "through" the notification and target whatever is "underneath" that notification instead.
Can be overridden by notification.nonBlocking.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { nonBlocking: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.nonBlocking}
        onChange={(nonBlocking) => this.setState({ nonBlocking })}
      >Non-blocking notifications</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show {this.state.nonBlocking? 'non-blocking': 'blocking'} notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        opacity={0.9}
        pinButton
        nonBlocking={this.state.nonBlocking}
      />
    </div>
  }
}

export default () => <App />
Number|Bool
default: 3000
By default, notifications are dismissed after a configured delay (the default is 3000ms), as specified by this prop (in milliseconds). Specifying notification.autoHideDelay=0 or notification.autoHideDelay=false will make the notification persistent, so the user will need to manually dismiss it by clicking the close button.
For more details on how to auto-hide or persist notifications, see Dismissing & persisting.
Notifications that are not auto-dismissed can be dismissed by the user, by clicking on the closeButton, or programmatically, by calling hideNotification.
Overrides autoHideDelay.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { autoHideDelay: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      autoHideDelay: this.state.autoHideDelay ? 3000: false,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.autoHideDelay}
        onChange={(autoHideDelay) => this.setState({ autoHideDelay }) }
      >
      Auto-hide notifications
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
      />
    </div>
  }
}

export default () => <App />
If true, the notification will not be hidden after autoHideDelay milliseconds have elapsed if the user clicks it before this configured delay. .
When a notification is clicked, it gets "pinned". This is explicitly visible if the notification is configured with the notification.pinButton.
Also see the opposite prop, notification.hideOnClick.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props); this.state = { cancelAutoHideOnClick: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      cancelAutoHideOnClick: this.state.cancelAutoHideOnClick,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.cancelAutoHideOnClick}
        onChange={(cancelAutoHideOnClick) => this.setState({ cancelAutoHideOnClick }) }
      >
      Cancel auto-hide on click
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification {this.state.cancelAutoHideOnClick? 'with': 'without'} cancelAutoHideOnClick</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        pinButton
        delayAutoHideOnMouseOver={false}
        autoHideDelay={3000}
      />
    </div>
  }
}

export default () => <App />
When this is true, and the notification has a specified opacity, when the mouseenter event is triggered over a notification, its opacity will be set to 1 while the mouse is over the it.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { clearOpacityOnMouseEnter: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      clearOpacityOnMouseEnter: this.state.clearOpacityOnMouseEnter,
      opacity: 0.5,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.clearOpacityOnMouseEnter}
        onChange={(clearOpacityOnMouseEnter) => this.setState({ clearOpacityOnMouseEnter })}
      >Clear opacity on mouse enter</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn(buttonProps, props):React.Node
default: undefined
Configures the close button for the notification. Any valid React.Node is accepted, or a function that returns a React.Node.
In case a function is provided, the first param, buttonProps, can be mutated to add/modify/remove new properties or values to reflect the desired styling or rendering.
Overrides closeButton.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number' + count,
      closeButton: (buttonProps, props) => <div {...buttonProps}
        className="" style={{
          cursor: 'pointer', fontSize: 10, padding: '0px 5px',
          display:'inline-block', background: '#0b7511', border: '1px solid magenta'
        }}
        >x</div>,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
      />
    </div>
  }
}

export default () => <App />
React.Node
default: undefined
The content of the notification. Any valid React.Node is accepted.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number '+ count,
      content: <h2>This is the <b>content</b> of the <b>{count}</b> notification!</h2>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
      />
    </div>
  }
}

export default () => <App />
If true, when the mouse is over the notification, the autoHideDelay will be suspended, until the mouse is out of the notification, so it won't be closed until notification.autoHideDelay milliseconds have elapsed since the mouse out event.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props); this.state = { delayAutoHideOnMouseOver: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      delayAutoHideOnMouseOver: this.state.delayAutoHideOnMouseOver,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.delayAutoHideOnMouseOver}
        onChange={(delayAutoHideOnMouseOver) => this.setState({ delayAutoHideOnMouseOver }) }
      >
      Delay auto hide on mouse over
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
A height to be applied to the notification.
Overrides height.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      height: 300,
      maxSize: { width: 550 },
      content: 'Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.'
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with height=300px
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Bool|String
default: true
Whether the notification should have an animation when it is hidden. Animation duration can be controlled via notification.hideTransitionDuration.
Overrides hideAnimation.
When a string is specified, the CSS className of zippy-animation-[HIDE_ANIMATION] is appended before the hide animation starts and zippy-animation-[HIDE_ANIMATION]--active is appended when the hide animation is in progress. Specifying true, defaults to adding the zippy-animation-fade-out and zippy-animation-fade-out--active, respectively.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hideAnimation: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      hideAnimation: this.state.hideAnimation,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.hideAnimation}
        onChange={(hideAnimation) => this.setState({ hideAnimation }) }
      >
      Use hide animation
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
If true, the notification will be dismissed when it is clicked. By default it's not closed, since it's configured with cancelAutoHideOnClick=true.
Overrides hideOnClick.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props); this.state = { hideOnClick: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      hideOnClick: this.state.hideOnClick,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.hideOnClick}
        onChange={(hideOnClick) => this.setState({ hideOnClick }) }
      >
      Hide on click
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification {this.state.hideOnClick? 'with': 'without'} hideOnClick</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        pinButton
      />
    </div>
  }
}

export default () => <App />
Affects the duration of the notification.hideAnimation for the notification.
Overrides hideAnimation.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      hideTransitionDuration: 2000,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with lazy hide transition</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
React.Node
default: undefined
Configures an icon displayed next to the notification title. Any valid React.Node is accepted.
Overrides icon.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

import reactLogoIcon from './reactLogoIcon'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number' + count,
      icon: <div style={{ marginRight: 10}}>{reactLogoIcon}</div>,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with custom icon</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
A maxSize (width, height) to be applied to the notification.
Overrides maxSize.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      maxSize: { width: 200 },
      minSize: { width: 200 },
      content: 'Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.'
    });
    count++;
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        If maxSize prop to have effect, minSize needs to be specified also to override the default min-width: 300px.
      </div>
      <Button onClick={() => this.addNotification()}>
        Show notification with maxWidth: 200
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
A minSize (width, height) to be applied to the notification.
Overrides minSize.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      minSize: { height: 500 },
      content: 'Short content'
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with minHeight: 500
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Whether the notification should reorder with a transition when its position changes.
Overrides moveTransition.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { moveTransition: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      moveTransition: this.state.moveTransition,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.moveTransition}
        onChange={(moveTransition) => this.setState({ moveTransition }) }
      >
      Use move transition
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
      />
    </div>
  }
}

export default () => <App />
Bool
default: undefined
When this is true, the notification has pointer-events: none, so it cannot be clicked - any clicks and mouse/pointer events are not captured, but rather go "through" the notification and target whatever is "underneath" that notification instead.
Overrides nonBlocking.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { nonBlocking: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      opacity: 0.9,
      pinButton: true,
      nonBlocking: this.state.nonBlocking,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.nonBlocking}
        onChange={(nonBlocking) => this.setState({ nonBlocking })}
      >Non-blocking notifications</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show {this.state.nonBlocking? 'non-blocking': 'blocking'} notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn(buttonProps, props):React.Node
default: undefined
Configures the pin button for the notification. Any valid React.Node is accepted, or a function that returns a React.Node.
In case a function is provided, the first param, buttonProps, can be mutated to add/modify/remove new properties or values to reflect the desired styling or rendering.
Overrides pinButton.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number' + count,
      pinButton: (buttonProps, props) => <div {...buttonProps}
        className="" style={{
          cursor: 'pointer', fontSize: 10, padding: '0px 5px',
          display:'inline-block', background: '#0b7511', border: '1px solid magenta'
        }}
        >{props.pinned ? 'pinned' : 'pin'}</div>,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with custom pin button</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to use direction: rtl for the notification.
Affects the position of the notification.closeButton and notification.pinButton in relation to the notification.title.
Overrides rtl.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { rtl: false }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      rtl: this.state.rtl,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.rtl}
        onChange={(rtl) => this.setState({ rtl }) }
      >
        rtl
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
      />
    </div>
  }
}

export default () => <App />
Whether the notification should have an animation when it is made visible. Animation duration can be controlled via notification.showTransitionDuration.
Overrides showAnimation.
When a string is specified, the CSS className of zippy-animation-[SHOW_ANIMATION] is appended before the show animation starts and zippy-animation-[SHOW_ANIMATION]--active is appended when the show animation is in progress. Specifying true, defaults to adding the zippy-animation-fade-in and zippy-animation-fade-in--active, respectively.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showAnimation: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      showAnimation: this.state.showAnimation,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.showAnimation}
        onChange={(showAnimation) => this.setState({ showAnimation }) }
      >
      Use show animation
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
Affects the duration of the notification.showAnimation for the notification.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      showTransitionDuration: 2000,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with lazy show transition</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn(titleProps, props):React.Node
default: undefined
The title of the notification. Any valid React.Node is accepted, or a function that returns a React.Node.
In case a function is provided, the first param, titleProps, can be mutated to add/modify/remove new properties or values to reflect the desired styling or rendering.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: (titleProps, props) => <div {...titleProps}><h3>Notification number {count}</h3></div>,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        minSize={{ height: 150 }}
      />
    </div>
  }
}

export default () => <App />
Boolean
default: true
When this is true, and the title does not fit on one line, ellipsis is shown and the text is truncated. Applied only to a notification. Overrides the titleEllipsis.
If you're using custom JSX (so React.Node) to render the notification.title, you may need to use the correct styling on the specified React.Node to make text truncate and show ellipsis.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { titleEllipsis: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      titleEllipsis: this.state.titleEllipsis,
      title: 'Notification ' + count + '. This is a very very long line of text being used as a title',
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.titleEllipsis}
        onChange={(titleEllipsis) => this.setState({ titleEllipsis }) }
      >
      Use titleEllipsis
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        maxSize={{ width: 200 }}
        // have this here so it proves it's overridden
        titleEllipsis={false}
      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
A width to be applied to the notification.
Overrides width.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      width: 300,
      maxSize: { height: 550 },
      content: 'Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.'
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with width=300px and maxHeight=550px
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Number|Object
default: {left:5,top:0,right:0,bottom:5}
Configures the space between two or more notifications. Can be a number, or an object with top,left,bottom,right.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  showNotification (){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.showNotification()}>Show notification with 50px offset</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        offset={50}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn(buttonProps, props):React.Node
default: undefined
Configures the pin button for all notifications in the <NotificationBoard />. Any valid React.Node is accepted, or a function that returns a React.Node.
In case a function is provided, the first param, buttonProps, can be mutated to add/modify/remove new properties or values to reflect the desired styling or rendering.
Can be overridden by notification.pinButton.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with custom pin button</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        pinButton={(buttonProps, props) => {
          return <div {...buttonProps}
            className="" style={{
              cursor: 'pointer', fontSize: 10, padding: '0px 5px',
              display:'inline-block', background: '#0b7511', border: '1px solid magenta'
            }}
          >{props.pinned ? 'pinned' : 'pin'}</div>}
        }
      />
    </div>
  }
}

export default () => <App />
String
default: "start"
Whether new notifications should be placed at the start or at the end of the stacking in the <NotificationBoard />. Valid values are "start" and "end".
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { pushStart: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} checked={this.state.pushStart}
        onChange={(pushStart) => this.setState({ pushStart }) }
      >
      Push start
      </CheckBox>
      {' '}
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification at {this.state.pushStart ? 'start' : 'end'}</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push={this.state.pushStart ? 'start' : 'end' }
      />
    </div>
  }
}

export default () => <App />
String|HTMLElement|Fn|Object
default: undefined
By default, notifications are constrained to the browser viewport. However, this can be configured via the region prop.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  showNotification() {
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div style={{ border: '1px dashed #1976D2', width: 700, height: 550, padding: 20 }}>
      <Button onClick={() => this.showNotification()}>Show constrained notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        region={(node) => node.parentNode}
      />

      <p>Notifications are constrained to the blue-bordered box.
      </p>
    </div>
  }
}

export default () => <App />
Use regionOffset to specify an offset (distance) from the specified region, so notifications respect the given offset when computing their position.
When displayed in the constrain region, notifications respect their specified stacking. Specifying stacking is done by configuring two directions. At first, notifications stack on the first direction, and then they wrap on the second specified direction.
The constrain region can have one of the following values:
  • an HTMLElement - so the notifications will be constrained to the corresponding bounding client rect.
  • a String to be used as a query selector, passed on to document.querySelector() - as a result, an HTMLElement is retrieved and used as mentioned in the above case.
  • an object with top,left,bottom,right (or top,left,width,height) to be used the as a bounding client rect (described in the first bullet above). Those coordinates should be relative to the browser viewport, just as the coordinates returned by getBoundingClientRect are.
  • a function returning any of the above.
Number|Object
default: 0
Use regionOffset to specify an offset (distance) from the specified region, so notifications respect the given offset when computing their position.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  showNotification() {
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div style={{ border: '1px dashed #1976D2', width: 700, height: 550, padding: 20 }}>
      <Button onClick={() => this.showNotification()}>Show constrained notification with offset</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={100}
        region={(node) => node.parentNode}
      />

      <p>Notifications are constrained to the blue-bordered box, and have an offset of 100 px from the sides.
      </p>
    </div>
  }
}

export default () => <App />
Bool
default: true
If true, notifications in the <NotificationBoard /> will use position: fixed, otherwise, position: absolute.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { relativeToViewport: false }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div style={{ height: 1000 }}>
      <div style={{position: 'relative', border: '2px dashed red', height: 550, padding: 20, width: 700 }}>
        <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.relativeToViewport}
          onChange={(relativeToViewport) => this.setState({ relativeToViewport })}
        >Use relativeToViewport</CheckBox>
        <Button style={{margin: 5}} onClick={() => this.addNotification()}>
          Show notification
        </Button>
        <NotificationBoard
          ref={(b) => this.board = b}
          region={(node) => node.parentNode}
          relativeToViewport={this.state.relativeToViewport}
        />
        <p>If you use <code>relativeToViewport: false</code> when you scroll the content, the notifications will remain in their position relative to the computed positioning.
        </p>
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: true
If true, notifications in the <NotificationBoard /> will be removed from memory as soon as they are hidden.
When removeOnHide=false, notifications are still kept in the state of <NotificationBoard />, so they can be redisplayed (shown) at a later time programmatically, using showNotification or showAll.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { removeOnHide: false }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.removeOnHide}
        onChange={(removeOnHide) => this.setState({ removeOnHide })}
      >Use removeOnHide</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()} style={{ marginRight: 10}}>
        Add notification{this.state.removeOnHide ? ' - will be removed when hidden' : ''}
      </Button>
      <Button style={{margin: 5}} onClick={() => this.board.showAll()}>
        Show all
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        removeOnHide={this.state.removeOnHide}
      />
      <p>If you use <code>removeOnHide: false</code> you can click "Show all" to make all previously hidden notifications visible again.
      </p>
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to use direction: rtl for all the notifications in the <NotificationBoard />.
Affects the position of the closeButton and pinButton in relation to the notification.title.
Can be overridden by notification.rtl.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { rtl: false }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.rtl}
        onChange={(rtl) => this.setState({ rtl }) }
      >
      rtl
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
        rtl={this.state.rtl}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether the notifications in the <NotificationBoard /> should have an animation when they are made visible. Animation duration can be controlled via showTransitionDuration.
Can be overridden by notification.showAnimation.
When a string is specified, the CSS className of zippy-animation-[SHOW_ANIMATION] is appended before the show animation starts and zippy-animation-[SHOW_ANIMATION]--active is appended when the show animation is in progress. Specifying true, defaults to adding the zippy-animation-fade-in and zippy-animation-fade-in--active, respectively.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showAnimation: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.showAnimation}
        onChange={(showAnimation) => this.setState({ showAnimation }) }
      >
      Use show animation
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="end"
        showAnimation={this.state.showAnimation}
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
Number
default: 600
Affects the duration of the showAnimation for all notifications in the <NotificationBoard />. Expressed in milliseconds.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification with lazy show transition</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        showTransitionDuration={2000}
        autoHideDelay={2000}
      />
    </div>
  }
}

export default () => <App />
String[]
default: ["bottom", "left"]
Specifies how the notifications are stacked in the <NotificationBoard />. The default stacking is ['bottom','left'], which means that new notifications make the stack grow towards the bottom of the screen and then wrap towards the left of the screen. This means that the first notification is displayed in the top-right of the screen.
Additionally, new notifications can be pushed to the start of the list, or to the end of the list, depending on the value of push (defaults to "start").
import React from 'react'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

let count = 1;
const showNotification = () => {
  zippy.notification.first.addNotification({
    title: 'Notification title ' + count,
    content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
  });
  count++;
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      autoHide: true,
      pushStart: true,
      stacking: ['bottom', 'left']
    }
  }
  render() {
    const checkboxes = [
      {value: 'autoHide', label: 'Auto hide notifications' },
      {value: 'pushStart', label: 'Push notifications to start' }
    ].map(c => <CheckBox key={c.value} style={{margin: 5}} inlineBlock={false} checked={this.state[c.value]}
      onChange={(v) => {
        this.setState({
          [c.value]: v
        })
      }}
    >{c.label}</CheckBox>)
    const stackingOptions = [
      ['bottom', 'left'], ['bottom', 'right'], ['bottom', 'center'],
      ['top', 'left'], ['top', 'right'], ['top', 'center'],
      ['left', 'top'], ['left', 'bottom'], ['left', 'center'],
      ['right', 'top'], ['right', 'bottom'], ['right', 'center']
    ];
    const stacking = <ComboBox
      style={{width: 200, margin: 5}}
      clearIcon={null}
      removeTagOnBackspace={false}
      value={this.state.stacking.join(', ') || ['bottom', 'left']}
      onChange={stacking => this.setState({stacking})}
      dataSource={
        stackingOptions.map(option => ({id: option, label: option.join(', ')}))
      }
    />
    return <div>
      <div>
        {checkboxes}
        <Button style={{margin: 5}} onClick={showNotification}>Show notification</Button>
        {stacking}
      </div>
      <NotificationBoard
        id="first"
        regionOffset={20}
        stacking={this.state.stacking || ['bottom', 'left']}
        push={this.state.pushStart ? 'start': 'end'}
        cancelAutoHideOnClick={false}
        autoHideDelay={this.state.autoHide ? 3000 : false}
      />
    </div>
  }
}

export default () => <App />
When 'center' is used for stacking - so you want to center the notifications to one of the sides of the screen (or constrain region), wrapping is not possible. Valid values for center stacking are:
  • ['top', 'center']: stacks from top to bottom centered
  • ['bottom', 'center']: stacks from bottom to top centered
  • ['left', 'center']: stacks from left to right centered
  • ['right', 'center']: stacks from right to left centered
Bool
default: true
Specifies whether to wrap on the second stacking axis when the notifications are outside of the constrained region or not.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Notification/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      stackingWrap: false
    }
  }

  showNotification() {
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }

  render() {
    return <div style={{ border: '1px dashed #1976D2', width: 700, height: 550, padding: 20 }}>
      <CheckBox
        style={{margin: 5}}
        checked={this.state.stackingWrap}
        onChange={(stackingWrap) => this.setState({stackingWrap})}
      >
        Stacking wrap
      </CheckBox>
      <br />
      <Button style={{margin: 5}} onClick={() => this.showNotification()}>Show constrained notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        region={(node) => node.parentNode}
        stackingWrap={this.state.stackingWrap}
      />

      <p>Notifications will not wrap when they no longer fit in the constrain region.
      </p>
    </div>
  }
}

export default () => <App />
Boolean
default: true
When this is true, and the title does not fit on one line, ellipsis is shown and the text is truncated. Applied to all notifications from the <NotificationBoard />. Can be overridden by notification.titleEllipsis.
If you're using custom JSX (or React.Node) to render the notification.title, you may need to use the correct styling on the specified React.Node to make text truncate and show ellipsis.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { titleEllipsis: true }
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification ' + count + '. This is a very very long line of text being used as a title',
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.titleEllipsis}
        onChange={(titleEllipsis) => this.setState({ titleEllipsis }) }
      >
      Use titleEllipsis
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        push="start"
        maxSize={{ width: 200 }}
        titleEllipsis={this.state.titleEllipsis}
      />
    </div>
  }
}

export default () => <App />
Bool
default: undefined
If true, updates the position of the notifications when window.onscroll happens.
Number
default: undefined
A width to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.width.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: 'Zippytech React Toolkit is designed to be a comprehensive set of rich UI components built with React and that can be easily integrated into existing or new applications.'
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with width=300px and maxHeight=550px
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        width={300}
        maxSize={{ height: 550 }}
      />
    </div>
  }
}

export default () => <App />
Fn(id)
default: undefined
Called whenever a notification is hidden.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showId: null, hideId: null }
  }
  showNotification() {
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the notification!</p>
    });
    count++
  }

  render() {
    return <div>
      <Button  onClick={() => this.showNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        onShow={(id) => { this.setState({ showId: id })}}
        onHide={(id) => { this.setState({ hideId: id })}}
      />
      <p>Last shown notification: {this.state.showId}.
      </p>
      <p>Last hidden notification: {this.state.hideId}.
      </p>
    </div>
  }
}

export default () => <App />
Fn(id)
default: undefined
Called whenever a notification is removed from the <NotificationBoard />. Notifications are automatically removed if removeOnHide=true.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { removeId: null, removeOnHide: true }
  }
  showNotification() {
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the notification!</p>
    });
    count++
  }

  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.removeOnHide}
        onChange={(removeOnHide) => this.setState({ removeOnHide }) }
      >Remove on hide
      </CheckBox>
      <Button style={{margin: 5}} onClick={() => this.showNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        removeOnHide={this.state.removeOnHide}
        onRemove={(id) => { this.setState({ removeId: id })}}
      />
      <p>Last removed notification: {this.state.removeId}.
      </p>
    </div>
  }
}

export default () => <App />
Fn(id)
default: undefined
Called whenever a notification is made visible.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showId: null, hideId: null }
  }
  showNotification() {
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the notification!</p>
    });
    count++
  }

  render() {
    return <div>
      <Button  onClick={() => this.showNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        onShow={(id) => { this.setState({ showId: id })}}
        onHide={(id) => { this.setState({ hideId: id })}}
      />
      <p>Last shown notification: {this.state.showId}.
      </p>
      <p>Last hidden notification: {this.state.hideId}.
      </p>
    </div>
  }
}

export default () => <App />
String
default: undefined
A background to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.background.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with background
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        background="#803110"
      />
    </div>
  }
}

export default () => <App />
String
default: undefined
A border to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.border.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show magenta-bordered notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        border="3px solid magenta"
      />
    </div>
  }
}

export default () => <App />
Number|String
default: undefined
A border-radius to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.borderRadius.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with big border-radius
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        borderRadius={10}
      />
    </div>
  }
}

export default () => <App />
String
default: undefined
A background to be applied to the notification.
Overrides background.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      background: '#803110',
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
String
default: undefined
A border to be applied to the notification.
Overrides border.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      border: '3px solid magenta',
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show magenta-bordered notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Number|String
default: undefined
A border-radius to be applied to the notification.
Overrides borderRadius.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      borderRadius: 10,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with huge border-radius
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
String
default: undefined
Specifies a className to use for a specific notification.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      className: 'global-notification-red-border',
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}

      />
    </div>
  }
}

export default () => <App />
Number
default: 0.85
An opacity value for the notification.
Overrides opacity.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { transparent: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      opacity: this.state.transparent ? 0.7 : 1,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.transparent}
        onChange={(transparent) => this.setState({ transparent })}
      >Make notification a bit transparent</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show {this.state.transparent ? 'transparent' : 'opaque'} notification.
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
String|Number
default: undefined
A padding to be applied to the notification.
Overrides padding.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      padding: 20,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with padding
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Bool
default: undefined
If true, the notification will be displayed with a default box-shadow.
Overrides shadow.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { shadow: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      shadow: this.state.shadow,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.shadow}
        onChange={(shadow) => this.setState({ shadow })}
      >Use shadow</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show notification {this.state.shadow? 'with' : 'without'} shadow
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
Specifies a style object to use for a specific notification. Overrides the value specified by style.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      style: { border: '1px solid red' },
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show styled notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
      />
    </div>
  }
}
export default () => <App />
Number
default: 0.85
An value for opacity to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.opacity.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { transparent: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.transparent}
        onChange={(transparent) => this.setState({ transparent })}
      >Make notification a bit transparent</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show {this.state.transparent? 'transparent' : 'opaque'} notification.
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        opacity={this.state.transparent ? 0.5 : 1}
      />
    </div>
  }
}

export default () => <App />
String|Number
default: undefined
A padding to be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.padding.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>
        Show notification with padding
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        padding={20}
      />
    </div>
  }
}

export default () => <App />
Bool
default: undefined
If true, a default shadow will be applied to all the notifications in the <NotificationBoard />.
Can be overridden by notification.shadow.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { shadow: true }
  }
  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <CheckBox style={{margin: 5}} inlineBlock={false} checked={this.state.shadow}
        onChange={(shadow) => this.setState({ shadow })}
      >Use shadow</CheckBox>
      <Button style={{margin: 5}} onClick={() => this.addNotification()}>
        Show notification {this.state.shadow? 'with' : 'without'} shadow
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        regionOffset={20}
        shadow={this.state.shadow}
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
Specifies a style object to use for all notifications in the <NotificationBoard />. Overridden by notification.style.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    })
  }
  render() {
    return <div>
      <Button onClick={() => this.addNotification()}>Show styled notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        style={{ border: '1px solid red' }}
        regionOffset={20}

      />
    </div>
  }
}

export default () => <App />
Number
default: undefined
Specifies a z-index for <NotificationBoard />.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'

let count = 1;

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      zIndex: 100
    }
  }

  addNotification(){
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Set a z-index to Notification:{' '}
        <NumericInput
          style={{ width: 90 }}
          value={this.state.zIndex}
          onChange={(zIndex) => this.setState({ zIndex })}
        />
      </div>
      <Button onClick={() => this.addNotification()}>
        Show notification
      </Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        zIndex={this.state.zIndex}
      />
    </div>
  }
}

export default () => <App />
Fn(notification: Object)
Number
Adds the notification to the notification board and displays it on the screen. Returns the id of the newly added notification.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  showNotification() {
    this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    count++;
  }
  render() {
    return <div>
      <Button onClick={() => this.showNotification()}>Show notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
      />
    </div>
  }
}
export default () => <App />
The notification config object should at least have a title or a content property to use inside the notification. Those props can be any valid React.Node value.
Fn(id: Number)
Object
Returns the notification with the specified id.
Fn()
Object[]
Returns an array of notification descriptor objects that are used to render the notifications.
Fn()
undefined
Hides all notifications in the <NotificationBoard />.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.notificationId = null
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
  }
  showAll() {
    this.board.showAll();
  }

  hideAll() {
    this.board.hideAll()
  }

  render() {
    return <div>
      <Button style={{marginRight: 10}} onClick={() => this.addNotification()}>Add a notification</Button>
      <Button style={{marginRight: 10}} onClick={() => this.showAll()}>Show all notifications</Button>
      <Button onClick={() => this.hideAll()}>Hide all notifications</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        pinButton
        removeOnHide={false}
        autoHideDelay={false}
      />
    </div>
  }
}

export default () => <App />
In case you want to programmatically hide only a specific notification, use the hideNotification method.
Fn(notificationId: Number)
Bool
Hides the notification. After it is hidden, it can be re-displayed later, using showNotification. Returns true if the notification was found.
Once a notification is removed, it's gone forever and cannot be restored. If you only want to hide a notification and be able to show it later, use hideNotification.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.notificationId = null
  }
  showNotification() {
    if (this.notificationId !== null) {
      this.board.showNotification(this.notificationId)
      return
    }
    this.notificationId = this.board.addNotification({
      title: 'Notification timestamp ' + Date.now(),
      content: <p>This is the <b>content</b> of the notification!</p>
    });
  }

  hideNotification() {
    if (this.notificationId !== null) {
      this.board.hideNotification(this.notificationId)
    }
  }

  render() {
    return <div>
      <Button style={{marginRight: 10}} onClick={() => this.showNotification()}>Show the notification</Button>
      <Button onClick={() => this.hideNotification()}>Hide the notification</Button>

      <NotificationBoard
        ref={(b) => this.board = b}
        removeOnHide={false}
        autoHideDelay={false}
      />
    </div>
  }
}

export default () => <App />
In case you want to hide all notifications, use the hideAll method.
Fn(notificationId: Number)
Bool
Removes the notification from the notification board and from the screen. Returns true if the notification was found.
Once a notification is removed, it's gone forever and cannot be restored. If you only want to hide a notification and be able to show it later, use hideNotification.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
let ids = [];
class App extends React.Component {
  showNotification() {
    const id = this.board.addNotification({
      title: 'Notification title ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
    ids.push(id)
    count++;
  }

  removeNotification() {
    if (ids.length) {
      this.board.removeNotification(ids.pop())
    }
  }

  render() {
    return <div>
      <Button style={{marginRight: 10}} onClick={() => this.showNotification()}>Show notification</Button>
      <Button onClick={() => this.removeNotification()}>Remove last notification</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        autoHideDelay={false}
      />
    </div>
  }
}

export default () => <App />
Fn()
undefined
Shows all hidden notifications in the <NotificationBoard />.
By default, removeOnHide is true, which means that notifications are removed from the <NotificationBoard /> as soon as they are hidden. When removeOnHide=false, notifications are kept in memory, so they can be redisplayed (shown) at a later time.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

let count = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.notificationId = null
  }
  addNotification() {
    count++;
    this.board.addNotification({
      title: 'Notification number ' + count,
      content: <p>This is the <b>content</b> of the <b>{count}</b> notification!</p>
    });
  }
  showAll() {
    this.board.showAll();
  }

  hideAll() {
    this.board.hideAll()
  }

  render() {
    return <div>
      <Button style={{marginRight: 10}} onClick={() => this.addNotification()}>Add a notification</Button>
      <Button style={{marginRight: 10}} onClick={() => this.showAll()}>Show all notifications</Button>
      <Button onClick={() => this.hideAll()}>Hide all notifications</Button>
      <NotificationBoard
        ref={(b) => this.board = b}
        pinButton
        removeOnHide={false}
        autoHideDelay={false}
      />
    </div>
  }
}

export default () => <App />
In case you want to programmatically show only a specific notification, use the showNotification method.
Fn(notificationId: Number)
Bool
Shows the notification - use this method for notifications already created, but which have been hidden. After the notification is shown, it can be hidden later, using hideNotification. Returns true, if the notification was found.
Once a notification is removed, it's gone forever and cannot be restored again with this method.
By default, removeOnHide is true, which means that notifications are removed from the <NotificationBoard /> as soon as they are hidden. When removeOnHide=false, notifications are kept in memory, so they can be redisplayed (shown) at a later time.
import React from 'react'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.notificationId = null
  }
  showNotification() {
    if (this.notificationId !== null) {
      this.board.showNotification(this.notificationId)
      return
    }
    this.notificationId = this.board.addNotification({
      title: 'Notification timestamp ' + Date.now(),
      content: <p>This is the <b>content</b> of the notification!</p>
    });
  }

  hideNotification() {
    if (this.notificationId !== null) {
      this.board.hideNotification(this.notificationId)
    }
  }

  render() {
    return <div>
      <Button style={{marginRight: 10}} onClick={() => this.showNotification()}>Show the notification</Button>
      <Button onClick={() => this.hideNotification()}>Hide the notification</Button>

      <NotificationBoard
        ref={(b) => this.board = b}
        removeOnHide={false}
        autoHideDelay={false}
      />
    </div>
  }
}

export default () => <App />
In case you want to show all notifications, use the showAll method.