react-awesome-slider/src/core/buttons.js

React Awesome Slider is a 60fps performant, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider carousel.

import React from 'react';
import PropTypes from 'prop-types';
import { getClassName } from '../helpers/components';

export default class Buttons extends React.Component {
  static propTypes = {
    cssModule: PropTypes.object,
    rootElement: PropTypes.string.isRequired,
    onMount: PropTypes.func.isRequired,
    onNext: PropTypes.func.isRequired,
    onPrev: PropTypes.func.isRequired,
    buttonContentLeft: PropTypes.node,
    buttonContentRight: PropTypes.node,
    organicArrows: PropTypes.bool,
  };

  static defaultProps = {
    cssModule: null,
    organicArrows: true,
    buttonContentLeft: null,
    buttonContentRight: null,
  };

  componentDidMount() {
    this.props.onMount({
      element: this.controls,
      next: this.next,
      prev: this.prev,
    });
  }

  render() {
    const {
      rootElement,
      cssModule,
      organicArrows,
      buttonContentLeft,
      buttonContentRight,
      onNext,
      onPrev,
    } = this.props;

    return (
      <div
        ref={controls => {
          this.controls = controls;
          this.props.onMount({
            element: this.controls,
            next: this.next || null,
            prev: this.prev || null,
          });
        }}
        className={[
          getClassName(`${rootElement}__controls`, cssModule),
          getClassName(`${rootElement}__controls--hidden`, cssModule),
        ].join(' ')}
      >
        <button
          ref={next => {
            this.next = next;
          }}
          aria-label="next"
          className={getClassName(`${rootElement}__next`, cssModule)}
          onClick={onNext}
        >
          {organicArrows ? (
            <span
              className={getClassName(
                `${rootElement}__controls__arrow-right`,
                cssModule
              )}
            />
          ) : (
            buttonContentRight
          )}
        </button>
        <button
          ref={prev => {
            this.prev = prev;
          }}
          aria-label="previous"
          className={getClassName(`${rootElement}__prev`, cssModule)}
          onClick={onPrev}
        >
          {organicArrows ? (
            <span
              className={getClassName(
                `${rootElement}__controls__arrow-left`,
                cssModule
              )}
            />
          ) : (
            buttonContentLeft
          )}
        </button>
      </div>
    );
  }
}