Generic Cinemagraph component built for React

import React from 'react';
import { Cinemagraph } from 'react-cinemagraph';

class Demo extends Component {
  state = {
    height: 50,
    maxHeight: 100,
    fallbackImage: './demo/assets/Disco.jpg',
    fallbackImageAlt: 'Disco',
    mp4Source: './demo/assets/Disco.mp4',
    webmSource: './demo/assets/Disco.webm',
    isBlackAndWhite: false,
    isSepia: false,
    isBlurred: false
  };

  render() {
    return (
      <div>
        <Cinemagraph
          height={this.state.height}
          maxHeight={this.state.maxHeight}
          fallbackImage={this.state.fallbackImage}
          fallbackImageAlt={this.state.fallbackImageAlt}
          mp4Source={this.state.mp4Source}
          webmSource={this.state.webmSource}
          isBlackAndWhite={this.state.isBlackAndWhite}
          isSepia={this.state.isSepia}
          isBlurred={this.state.isBlurred}
        />
      </div>
    );
  }
}

import React from 'react';
import { Cinemagraph } from 'react-cinemagraph';

import discoJpg from './assets/Disco.jpg';
import discoMp4 from './assets/Disco.mp4';
import discoWebM from './assets/Disco.webm';

class Demo extends Component {
  state = {
    height: 50,
    maxHeight: 100,
    fallbackImage: discoJpg,
    fallbackImageAlt: 'Disco',
    mp4Source: discoMp4,
    webmSource: discoWebM,
    isBlackAndWhite: false,
    isSepia: false,
    isBlurred: false
  };

  render() {
    return (
      <div>
        <Cinemagraph
          height={this.state.height}
          maxHeight={this.state.maxHeight}
          fallbackImage={this.state.fallbackImage}
          fallbackImageAlt={this.state.fallbackImageAlt}
          mp4Source={this.state.mp4Source}
          webmSource={this.state.webmSource}
          isBlackAndWhite={this.state.isBlackAndWhite}
          isSepia={this.state.isSepia}
          isBlurred={this.state.isBlurred}
        />
      </div>
    );
  }
}