Top
LoadMask API - API
LoadMask API
Props (4)
Styling Props (6)
React.Node
default: undefined
Specifies children that will be rendered below the spinner.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

import tabPanel from './tabPanel'

const getTime = () => new Date().toLocaleTimeString()

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clock: getTime() };
  }

  componentDidMount() {
    this.intervalId = setInterval(
      () => {
        this.setState({
          clock: getTime()
        })
      }, 1000
    )
  }

  componentWillUnmount() {
    window.clearInterval(this.intervalId);
  }

  render() {
    const children = <div>
      <div style={{ color: 'DodgerBlue' }}>
        <h3>Loading, please wait...</h3>
      </div>
      <div style={{background: 'LightGray', borderRadius: 2, border: '1px solid DodgerBlue', padding: 10}}>
        <h3>
          {this.state.clock}
        </h3>
      </div>
    </div>

    return <div>
      <div style={{ position: 'relative', padding: 20, border: '1px solid gray' }}>
        {tabPanel}
        <LoadMask>
          {children}
        </LoadMask>
      </div>
    </div>
  }
}
export default () => <App />
Bool|String
default: true
You can use the pointerEvents boolean prop to configure if the <LoadMask /> component should accept pointer events or should pass them through. Specifying false makes any pointer events pass through to other DOM nodes "behind" the <LoadMask />.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

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

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

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { opacity: 0.6, background: true, pointerEvents: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.pointerEvents}
          onChange={(pointerEvents) => {
            this.setState({
              pointerEvents
            })
          }}
        >Accept pointerEvents (when false, you can click through the mask and focus the inputs behind)
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.background}
          onChange={(background) => {
            this.setState({
              background
            })
          }}
        >Show background
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20}}>
        <p>Select opacity:</p>
        <RadioButtonGroup
          radioValue={this.state.opacity}
          onChange={({ checkedItemValue: opacity}) => {
            this.setState({
              opacity
            })
          }}
          radioOptions={
            [0, 0.2, 0.4, 0.6, 0.8, 1].map(value => ({ value, label: value }) )
          }
        />
      </div>

      <div style={{ position: 'relative', height: 300, padding: 20, border: '1px solid gray' }}>
        <form>
          <p>
            <label>
              <span style={{ display:'inline-block', minWidth: 150}}>
                First name:
              </span> <input style={{ padding: 5, border: '1px solid gray', borderRadius: 5 }} />
            </label>
          </p>

          <p>
            <label>
              <span style={{ display:'inline-block', minWidth: 150}}>
                Last name:
              </span> <input style={{ padding: 5, border: '1px solid gray', borderRadius: 5 }} />
            </label>
          </p>

          <p>
            <label>
              <span style={{ display:'inline-block', minWidth: 150}}>
                Email:
              </span> <input style={{ padding: 5, border: '1px solid gray', borderRadius: 5 }} />
            </label>
          </p>
        </form>
        <LoadMask
          pointerEvents={this.state.pointerEvents}
          background={this.state.background && 'aqua'}
          backgroundOpacity={this.state.opacity} />
      </div>
    </div>
  }
}
export default () => <App />
Number
default: undefined
Controls the size of the spinner.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

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

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

import tabPanel from './tabPanel'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true, size: 40 }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <p>Choose spinner size:</p>
        <RadioButtonGroup
          radioValue={this.state.size}
          onChange={({ checkedItemValue: size}) => {
            this.setState({
              size
            })
          }}
          radioOptions={
            [30, 40, 50, 90, 130].map(value => ({ value, label: value + 'px' }) )
          }
        />
      </div>

      <div style={{ marginBottom: 20}}>
        <CheckBox checked={this.state.visible} onChange={visible => this.setState({ visible })}>
          Visible
        </CheckBox>
      </div>

      <div style={{ position: 'relative', padding: 20, border: '1px solid gray' }}>
        {tabPanel}
        <LoadMask visible={this.state.visible} size={this.state.size} />
      </div>
    </div>
  }
}
export default () => <App />
Bool
default: true
Whether the mask is visible or not.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

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

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

import tabPanel from './tabPanel'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { visible: true, size: 40 }
  }
  render() {
    return <div>

      <div style={{ marginBottom: 20}}>
        <CheckBox checked={this.state.visible} onChange={visible => this.setState({ visible })}>
          Visible
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20 }}>
        <p>Choose spinner size:</p>
        <RadioButtonGroup
          radioValue={this.state.size}
          onChange={({ checkedItemValue: size}) => {
            this.setState({
              size
            })
          }}
          radioOptions={
            [30, 40, 50, 90, 130].map(value => ({ value, label: value + 'px' }) )
          }
        />
      </div>

      <div style={{ position: 'relative', padding: 20, border: '1px solid gray' }}>
        {tabPanel}
        <LoadMask visible={this.state.visible} size={this.state.size} />
      </div>
    </div>
  }
}
export default () => <App />
String|Bool
default: true
You can change the background color of the mask by specifying a color, or you can choose to have no background, by background=false.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

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

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

import tabPanel from './tabPanel'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { opacity: 0.6, background: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <p>Select background:</p>
        <RadioButtonGroup
          onChange={({ checkedItemValue: background }) => this.setState({background})}
          radioOptions={[
            {label: 'White', value: 'White'},
            {label: 'Black', value: 'Black'},
            {label: 'Pink', value: 'Pink'},
            {label: 'Orange', value: 'Orange'},
            {label: 'SkyBlue', value: 'SkyBlue'},
            {label: 'DarkCyan', value: 'DarkCyan'},
            {label: 'BlanchedAlmond', value: 'BlanchedAlmond'},
            {label: 'no background (false)', value: false },
            {label: 'default', value: undefined }
          ]}
          orientation="vertical"
          radioValue={this.state.background}
        />
      </div>
      <div style={{ marginBottom: 20}}>
        <p>Select opacity:</p>
        <RadioButtonGroup
          radioValue={this.state.opacity}
          orientation="horizontal"
          onChange={({ checkedItemValue: opacity}) => {
            this.setState({
              opacity
            })
          }}
          radioOptions={
            [0, 0.2, 0.4, 0.6, 0.8, 1].map(value => ({ value, label: value }) )
          }
        />
      </div>

      <div style={{ position: 'relative', padding: 20, border: '1px solid gray' }}>
        {tabPanel}
        <LoadMask
          background={this.state.background}
          backgroundOpacity={this.state.opacity} />
      </div>
    </div>
  }
}
export default () => <App />
String
default: undefined
A CSS className to be appended to the background layer of the <LoadMask />.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ position: 'relative', height: 300 }}>
        <LoadMask visible={true} backgroundLayerClassName="loadmask-red-background">loading...</LoadMask>
      </div>
    </div>
  }
}
export default () => <App />
Object
default: undefined
A style object applied to the <LoadMask /> background layer.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ position: 'relative', height: 200 }}>
        <LoadMask visible={true} backgroundLayerStyle={{ border: '3px solid green' }}>loading...</LoadMask>
      </div>
    </div>
  }
}
export default () => <App />
Number
default: undefined
Configures the the opacity of the background.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

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

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

import tabPanel from './tabPanel'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { opacity: 0.6, background: true }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20}}>
        <CheckBox
          checked={this.state.background}
          onChange={(background) => {
            this.setState({
              background
            })
          }}
        >Show background
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20}}>
        <p>Select opacity:</p>
        <RadioButtonGroup
          radioValue={this.state.opacity}
          onChange={({ checkedItemValue: opacity}) => {
            this.setState({
              opacity
            })
          }}
          radioOptions={
            [0, 0.2, 0.4, 0.6, 0.8, 1].map(value => ({ value, label: value }) )
          }
        />
      </div>

      <div style={{ position: 'relative', padding: 20, border: '1px solid gray' }}>
        {tabPanel}
        <LoadMask
          pointerEvents={this.state.pointerEvents}
          background={this.state.background && 'aqua'}
          backgroundOpacity={this.state.opacity} />
      </div>
    </div>
  }
}
export default () => <App />
String
default: undefined
A CSS className to be appended to the <LoadMask /> component.
import React from 'react'
import LoadMask from '@zippytech/react-toolkit/LoadMask'
import '@zippytech/react-toolkit/LoadMask/index.css'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ position: 'relative', height: 300 }}>
        <LoadMask visible={true} className="loadmask-green-border">loading...</LoadMask>
      </div>
    </div>
  }
}
export default () => <App />
Object
default: undefined
A style object applied to the <LoadMask /> component.
import React from 'react'

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

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

import tabPanel from './tabPanel'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { customStyle: false }
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.customStyle}
          onChange={customStyle => this.setState({ customStyle })}
        >
          Use custom style
        </CheckBox>
      </div>
      <div style={{ position: 'relative', border: '1px solid gray', padding: 20 }}>
        {tabPanel}
        <LoadMask style={this.state.customStyle ? { color: 'orange', fontSize: 30 } : null} >
          <div>
            Loading...
          </div>
        </LoadMask>
      </div>
    </div>
  }
}
export default () => <App />