MessageWindow - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
<MessageWindow /> is a Window with a footer containing buttons and a special icon applied before the title.
To start using the <MessageWindow /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/MessageWindow and @zippytech/react-toolkit/MessageWindow/index.css.
All the documentation for the Window is also applicable to the <MessageWindow />.
This is the most basic setup for a <MessageWindow />. In the following sections we'll explore how to use the <MessageWindow />, supported window types and theming.
There are five types of <MessageWindow />, which will be presented in the following sections. You can specify a <MessageWindow /> type in order to select the window type (valid values are "info", "warning", "question", "error" and "yesNoCancel"), or you can import the desired window directly from the specific file:
import ErrorWindow from '@zippytech/react-toolkit/MessageWindow/ErrorWindow'
You can change default button labels using okButtonLabel, cancelButtonLabel, yesButtonLabel, noButtonLabel.
You can also use a named import as shown below. Note though that the live editor in the documentation does not support using named imports.
import { ErrorWindow } from '@zippytech/react-toolkit/MessageWindow'
You can customize any part of the <MessageWindow />, but most often you will want to specify a title, a different icon or other buttons.
Has a single Ok button and a icon.
Has a single Ok button and a icon .
Has two Yes and No buttons and a icon .
Has a single Ok button and an icon .
Has three Yes, No and Cancel buttons and a icon .
Read more about different types of windows and callbacks functions associated with it in the window types page, or about styling and other props.