React-prelodr NPM

react-prelodr

A React component based on Prelodr.

Install

yarn add react-prelodr --dev

NPM

npm install react-prelodr --save-dev

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import ReactPrelodr from 'react-prelodr'

class App extends React.Component {

  onClick () {
    // Get the wrapper component reference
    const pre = this.refs.myRef

    // You can also get the Prelodr instance for access to API (optional)
    const PrelodrInstance = pre.getPrelodr()

    // Play
    pre
      .show('Starting...')
      .hide()

      .show('Processing...')
      .hide()

      .show('Finishig...')
      .hide()
  }

  onShown () {
    console.log('When component is shown!')
  }

  onHidden () {
    console.log('When component is hidden!')
  }

  render () {
    return <div>
      <button onClick={this.onClick.bind(this)}>Show Prelodr</button>

      <ReactPrelodr ref='myRef'
        prefixClass='prelodr'
        duration={800}
        onShown={this.onShown}
        onHidden={this.onHidden}
      />
    </div>
  }

}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

Check out Codepen Demo for more details.

CDN

The UMD and style files are also available on unpkg:

<!-- Prelodr Style -->
<link href="https://unpkg.com/prelodr/dist/prelodr.min.css">
<!-- React-Prelodr Component -->
<script src="https://unpkg.com/react-prelodr/dist/react-prelodr.min.js"></script>