1.0.8 • Published 5 years ago

react-turn-to-dust v1.0.8

Weekly downloads
5
License
MIT
Repository
github
Last release
5 years ago

react-turn-to-dust

Simple React component to turn any HTML to dust (like the infinity gauntlet snap)

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save react-turn-to-dust

Usage

import * as React from 'react';
import ReactDOM from 'react-dom';
import { TurnToDust } from 'react-turn-to-dust';

class App extends React.Component {
  constructor() {
    super();
    this.state = { snap: false }
  }

  snap = () => {
    this.setState({ snap: true });
  }

  render = () => {
    return <React.Fragment>
      <div style={{ display: 'flex' }}>
        <TurnToDust
          dustIntensity={20}
          snap={this.state.snap}
          content={
            <h1>Hello world!</h1>
          }
        />
      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <button onClick={this.snap}>
        Snap
        </button>
      </div>
    </React.Fragment>;
  }
}

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

Prop definitions

PropTypeDefaultUsage
contentElementemptyPass the element you want to turn to dust
snapBooleanfalseSet to true when you want the content to turn to dust
dustIntensityNumber15Increase and reduce to see what works best for your content