unc-react-pt-menu v0.2.0

Install

Install it with npm (npm install unc-react-pt-menu --save). Here's a simple example:

import React from 'react';
import { render } from 'react-dom';

import { PageTransitions, Page } from 'unc-react-page-transitions';

import PTMenu from 'unc-react-pt-menu';

import dataMenu from './dataMenu';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      slides: null,
      currentPage: 'pt-page-0',
      visitedItems: ['pt-page-0']
    };
  }
  
  /**
   * Updates the slides value in header
   */
  componentDidMount() {
    this.setState({
      slides: this.pt.props.children.length
    });
  }

  handlerClick = () => {
    const nextPage = this.pt.nextPage();

    this.setState(prevState => ({
      visitedItems: [...prevState.visitedItems, nextPage],
      currentPage: nextPage
    }));
  }

  itemClick = (event) => {
    const nextPage = this.pt.nextPage(event.currentTarget.dataset.page);

    this.setState(prevState => ({
      visitedItems: [...prevState.visitedItems, nextPage],
      currentPage: nextPage
    }));
  }

  render() {
    return (
      <div>
        <PTMenu title='Cómo identificar si tu idea es una oportunidad'
                headerImage='./26.jpg'
                slides={this.state.slides}
                data={dataMenu}
                visitedItems={this.state.visitedItems}
                currentPage={this.state.currentPage}
                itemClick={this.itemClick} />

        <PageTransitions ref={ (pt) => { this.pt = pt; }} defaultAnimation='8'>
          <Page style={{ backgroundColor: 'rgb(113, 175, 154)' }} />
          <Page style={{ backgroundColor: 'rgb(182, 135, 54)' }} />
          <Page style={{ backgroundColor: 'rgb(216, 183, 198)' }} />
          <Page style={{ backgroundColor: 'rgb(149, 5, 192)' }} />
          <Page style={{ backgroundColor: 'rgb(244, 83, 96)' }} />
          <Page style={{ backgroundColor: 'rgb(44, 200, 176)' }} />
          <Page style={{ backgroundColor: 'rgb(185, 14, 239)' }} />
          <Page style={{ backgroundColor: 'rgb(36, 249, 229)' }} />
          <Page style={{ backgroundColor: 'rgb(41, 81, 213)' }} />
          <Page style={{ backgroundColor: 'rgb(62, 139, 56)' }} />
          <Page style={{ backgroundColor: 'rgb(39, 220, 190)' }} />
          <Page style={{ backgroundColor: 'rgb(60, 86, 249)' }} />
          <Page style={{ backgroundColor: 'rgb(126, 220, 253)' }} />
          <Page style={{ backgroundColor: 'rgb(67, 175, 122)' }} />
          <Page style={{ backgroundColor: 'rgb(36, 103, 47)' }} />
          <Page style={{ backgroundColor: 'rgb(209, 15, 151)' }} />
          <Page style={{ backgroundColor: 'rgb(180, 187, 185)' }} />
          <Page style={{ backgroundColor: 'rgb(174, 181, 218)' }} />
          <Page style={{ backgroundColor: 'rgb(214, 52, 248)' }} />
          <Page style={{ backgroundColor: 'rgb(201, 137, 55)' }} />
          <Page style={{ backgroundColor: 'rgb(139, 127, 36)' }} />
          <Page style={{ backgroundColor: 'rgb(191, 72, 100)' }} />
          <Page style={{ backgroundColor: 'rgb(105, 226, 224)' }} />
          <Page style={{ backgroundColor: 'rgb(95, 190, 90)' }} />
          <Page style={{ backgroundColor: 'rgb(48, 29, 155)' }} />
          <Page style={{ backgroundColor: 'rgb(166, 204, 192)' }} />
          <Page style={{ backgroundColor: 'rgb(41, 150, 164)' }} />
          <Page style={{ backgroundColor: 'rgb(63, 244, 192)' }} />
          <Page style={{ backgroundColor: 'rgb(38, 91, 221)' }} />
          <Page style={{ backgroundColor: 'rgb(48, 233, 47)' }} />
          <Page style={{ backgroundColor: 'rgb(253, 99, 114)' }} />
          <Page style={{ backgroundColor: 'rgb(209, 15, 151)' }} />
          <Page style={{ backgroundColor: 'rgb(180, 187, 185)' }} />
          <Page style={{ backgroundColor: 'rgb(174, 181, 218)' }} />
          <Page style={{ backgroundColor: 'rgb(214, 52, 248)' }} />
          <Page style={{ backgroundColor: 'rgb(201, 137, 55)' }} />
        </PageTransitions>
      </div>
    );
  }
}

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

Documentation