example.js

/**
 *
 * HeaderThemesInner
 *
 */

import React, { PropTypes } from 'react';
import styled from 'styled-components';
import ThemesItem from './ThemesItem';

export default class HeaderThemes extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentDidMount() {
    const Overlay = `
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      background: rgba(0, 51, 51, 0.8);
      animation-duration: .3s;
      animation-fill-mode: both;
      display: flex;
      margin: 0;
      padding: 100px 0 0 0;
      flex-direction: column;
      color: white;
      font-family: 'Mosk';
      justify-content: space-around;
    `;

    const OverlayIn = styled.ul`
      ${Overlay}
      animation-name: fadeInDown;
    `;

    const OverlayOut = styled.ul`
      ${Overlay}
      animation-name: fadeOutUp;
    `;
  }

  render() {
    const { active, themes, themesList } = this.props;
   
    if (active) {
      return (
        <OverlayIn>{themesList}</OverlayIn>
      );
    } else if (active === false) {
      return (
        <OverlayOut>{themesList}</OverlayOut>
      );
    }
    return null;
  }
}

HeaderThemes.propTypes = {
  active: PropTypes.bool,
  themesList: PropTypes.any,
  themes: PropTypes.any,
};