Top
MessageWindow API - API
MessageWindow API
Props (14)
Callback Props (5)
Styling Props (2)
You can also use any of the props used by Window.
Array[React.Node]
default: undefined
You can provide custom buttons to your window, by specifying an array of React.Nodes representing the custom buttons.
import React from 'react'

import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'

const buttons = [
  <button key="ok">It's ok!</button>,
  <button key="relax">Don't worry.</button>,
  <button key="out">Get out!</button>
]

class App extends React.Component {
  render() {
    return <div style={{ border: '1px dotted blue', width: '100%', height: 300, position: 'relative' }}>
      <MessageWindow
        title="MessageWindow"
        buttons={buttons}
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
String
default: "center"
Specifies the position of the buttons. Available values are:
  • "center"
  • "start"
  • "end"
  • "space-between"
  • "space-around"
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { buttonsAlign: 'center' }
  }
  render() {
    return <div>
      <ComboBox style={{ maxWidth: 150, zIndex: 120 }}
        onChange={value => this.setState({buttonsAlign: value})}
        value={this.state.buttonsAlign}
        dataSource={[
          {id: 'start', label: 'start'},
          {id: 'center', label: 'center'},
          {id: 'end', label: 'end'},
          {id: 'space-between', label: 'space-between'},
          {id: 'space-around', label: 'space-around'}
        ]}
        collapseOnSelect
        changeValueOnNavigation
      />
      <div style={{ position: 'relative', width: '100%', height: 300 }}>
        <MessageWindow
          title="MessageWindow"
          type="yesNoCancel"
          buttonsAlign={this.state.buttonsAlign}
        >
          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.
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </MessageWindow>
      </div>
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Specifies the label of the Cancel button.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
export default () => <div>
  <MessageWindow
    title="MessageWindow"
    cancelButtonLabel="Custom Cancel"
    type="yesNoCancel"
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
Bool
default: true
Whether to call onDismiss when a button is clicked.
When the top right x close icon is called, onClose is called, not onDismiss.
import React from 'react'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/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.state = {
      dismissOnButtonClick: true,
      visible: true
    }
  }
  onDismiss(type, event) {
    this.setState({ visible: false})
  }
  render() {
    return <div>
      <CheckBox
        checked={this.state.dismissOnButtonClick}
        onChange={checked => this.setState({dismissOnButtonClick: checked})}
      >dismissOnButtonClick</CheckBox>
      <div style={{ position: 'relative', width: '100%', height: 300 }}>
      {
        !this.state.visible ?
        <Button onClick={() => this.setState({ visible: true })}>
          Show the message window
        </Button> : null
      }
        <MessageWindow
          title="MessageWindow"
          onDismiss={this.onDismiss.bind(this)}
          dismissOnButtonClick={this.state.dismissOnButtonClick}
          type="yesNoCancel"
          visible={this.state.visible}
        >
          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.
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </MessageWindow>
      </div>
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Allows you to specify a custom icon to the window.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
import Icon from './icons'

const iconStyle = { fill: '#e9ecf0' }

export default () => <div>
  <MessageWindow
    title="MessageWindow"
    icon={<Icon style={iconStyle} type="zoomBack" />}
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
Number
default: undefined
Allows you to change the size of the window's icon.
Will only work for the default icon.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
import Icon from './icons'
export default () => <div>
  <MessageWindow
    title="MessageWindow"
    iconSize={30}
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
React.node
default: undefined
Specifies the label of the No button.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
export default () => <div>
  <MessageWindow
    title="MessageWindow"
    noButtonLabel="Custom No"
    type="yesNoCancel"
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
React.node
default: undefined
Specifies the label of the OK button.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'

export default () => <div>
  <MessageWindow
    title="MessageWindow"
    okButtonLabel="Custom OK"
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
Number
default: undefined
Allows you to change the opacity of the window.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'

export default () => <div>
  <MessageWindow
    title="MessageWindow"
    opacity={0.6}
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
Fn()
default: undefined
Custom renderer for the window's footer.
import React from 'react'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'

class App extends React.Component {
  render() {
    return <div>
      <MessageWindow
        title="MessageWindow"
        renderFooter={props => <div {...props} style={{border: '1px solid red'}} />}
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
Bool
default: "true"
Whether to use direction: rtl.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/MessageWindow/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rtl: false }
  }
  render() {
    return <div>
      <div>
        <CheckBox checked={this.state.rtl} onChange={checked => this.setState({rtl: checked})}>rtl</CheckBox>
      </div>
      <div style={{ position: 'relative', height: 300, width: '100%' }}>
        <MessageWindow
          title="MessageWindow"
          rtl={this.state.rtl}
        >
          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.
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </MessageWindow>
      </div>
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Specifies the contents of the title.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
export default () => <div>
  <MessageWindow
    title="This is the title"
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
String
default: "info"
Specifies the type of the Window. Available values are:
  • "info"
  • "warning"
  • "question"
  • "error"
  • "yesNoCancel"
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { type: 'info' }
  }
  render() {
    return <div>
      <div style={{ position: 'relative', height: 300, width: '100%' }}>
        <MessageWindow
          title="MessageWindow"
          type={this.state.type}
        >
          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.
          We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
        </MessageWindow>
      </div>

      <div style={{ marginTop: 20}}>
        <ComboBox
          style={{zIndex: 120}}
          onChange={value => this.setState({type: value})}
          value={this.state.type}
          dataSource={[
            {id: 'info', label: 'info'},
            {id: 'warning', label: 'warning'},
            {id: 'question', label: 'question'},
            {id: 'error', label: 'error'},
            {id: 'yesNoCancel', label: 'yesNoCancel'}
          ]}
          collapseOnSelect
          changeValueOnNavigation
        />
      </div>
    </div>
  }
}
export default () => <App />
React.node
default: undefined
Specifies the label of the Yes button.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'
export default () => <div>
  <MessageWindow
    title="MessageWindow"
    yesButtonLabel="Custom Yes"
    type="yesNoCancel"
  >
    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.
    We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
  </MessageWindow>
</div>
Fn(buttonType, event)
default: undefined
This function will be called on click on the Cancel button.
import React from 'react'

import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/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.state = { visible: true, type: null }
  }
  onCancelButtonClick(type, event) {
    this.setState({ visible: false, type})
  }
  render() {
    return <div>
      {!this.state.visible ? <Button onClick={() => this.setState({ visible: true })}>
        Show the message window
      </Button> : null}
      {!this.state.visible ? <p>Window closed on {this.state.type} click.</p> : null}
      <MessageWindow
        title="MessageWindow"
        onCancelButtonClick={this.onCancelButtonClick.bind(this)}
        visible={this.state.visible}
        type="yesNoCancel"
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
Fn()
default: undefined
This function will be called when the window is dismissed - via clicking one of the window buttons - ok, yes, no or cancel.
By default, dismissOnButtonClick is true, so onDismiss is called on button clicks.
When the onDismiss callback prop is called, the window does not hide or dismiss on its own. It's up to you to implement the desired functionality.
When the user clicks the top-right x icon to close the window, onClose is called. The window does not hide or close on its own. It's up to you to implement the desired functionality.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/MessageWindow/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true }
  }
  onDismiss(type, event) {
    this.setState({ visible: false })
  }
  render() {
    return <div>
      {!this.state.visible ? <Button onClick={() => this.setState({ visible: true })}>
        Show the message window
      </Button> : null}
      <MessageWindow
        title="MessageWindow"
        onDismiss={this.onDismiss.bind(this)}
        type="yesNoCancel"
        visible={this.state.visible}
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
Fn(buttonType, event)
default: undefined
This function will be called on click on the No button.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/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.state = { visible: true, type: null }
  }
  onNoButtonClick(type, event) {
    this.setState({ visible: false, type})
  }
  render() {
    return <div>
      {!this.state.visible ? <Button onClick={() => this.setState({ visible: true })}>
        Show the message window
      </Button> : null}
      {!this.state.visible ? <p>Window closed on {this.state.type} click.</p> : null}
      <MessageWindow
        title="MessageWindow"
        onNoButtonClick={this.onNoButtonClick.bind(this)}
        visible={this.state.visible}
        type="yesNoCancel"
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
Fn(buttonType, event)
default: undefined
This function will be called on click on the OK button.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/MessageWindow/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true, type: null }
  }
  onOkButtonClick(type, event) {
    this.setState({ visible: false, type})
  }
  render() {
    return <div>
      {!this.state.visible ? <Button onClick={() => this.setState({ visible: true })}>
        Show the message window
      </Button> : null}
      {!this.state.visible ? <p>Window closed on {this.state.type} click.</p> : null}
      <MessageWindow
        title="MessageWindow"
        onOkButtonClick={this.onOkButtonClick.bind(this)}
        visible={this.state.visible}
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
Fn(buttonType, event)
default: undefined
This function will be called on click on the Yes button.
import React from 'react'

import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/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.state = { visible: true, type: null }
  }
  onYesButtonClick(type, event) {
    this.setState({ visible: false, type})
  }
  render() {
    return <div>
      {!this.state.visible ? <Button onClick={() => this.setState({ visible: true })}>
        Show the message window
      </Button> : null}
      {!this.state.visible ? <p>Window closed on {this.state.type} click.</p> : null}
      <MessageWindow
        title="MessageWindow"
        onYesButtonClick={this.onYesButtonClick.bind(this)}
        type="yesNoCancel"
        visible={this.state.visible}
      >
        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.
        We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
      </MessageWindow>
    </div>
  }
}
export default () => <App />
String
default: undefined
A CSS className to be appended to the Panel component.
import React from 'react'
import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'

export default () => <MessageWindow
  title="MessageWindow"
  className="color-red-class"
>
  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.
  We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
</MessageWindow>
Object
default: undefined
A style object applied to the <MessageWindow /> component.
import React from 'react'

import MessageWindow from '@zippytech/react-toolkit/MessageWindow'
import '@zippytech/react-toolkit/MessageWindow/index.css'

export default () => <MessageWindow
  title="MessageWindow title"
  style={{ background: '#d5f9d5'}}
>
  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.
  We focus on building components, so you can focus on what actually matters to you - building & shipping your app faster to the market.
</MessageWindow>