Siema - React basic example

index.html

<div id="root"></div>

script.babel

class App extends React.Component {
  
  prev = () => {
    this.siema.prev()
  };
  
  next = () => {
    this.siema.next()
  };
  
  render() {
    return (
      <div>
        <div className="siema">
          <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
          <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
          <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
          <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
        </div>
        <button onClick={this.prev}>Prev</button>
        <button onClick={this.next}>Next</button>
      </div>
    );
  }

  componentDidMount() {
    this.siema = new Siema();
  }
}

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://pawelgrzybek.com/siema/assets/siema.min.js"></script>

siema-react-basic-example.markdown

Siema - React basic example

A Pen by james quinn on CodePen.

License.

style.scss

body {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

img {
  width: 100%;
}

.siema {
  margin: 1rem 0;
}