Nearly Perfect Mediocracy

    react-viewmaster

    2.0.1 • Public • Published

    React Viewmaster

    A carousel-like component that slides children in and out of view.

    Example usage

    class MyComponent extends Component {
      constructor () {
        super()
     
        this.state = {
          toggle: true,
          index: 0
        }
        
        this.toggle = this.toggle.bind(this)
        this.forward = this.forward.bind(this)
        this.back = this.back.bind(this)
      }
     
      setIndex (index) {
        this.setState({ index })
      }
     
      toggle () {
        this.setState({ toggle: !this.state.toggle })
      }
     
      forward () {
        this.setState({
          index: this.state.index + 1
        })
      }
     
      back () {
        this.setState({
          index: this.state.index - 1
        })
      }
     
      render () {
        const children = slides.filter((_, idx) =>
          idx % (this.state.toggle ? 2 : 1) === 0)
     
        return (
          <div style={{ margin: '0 50', height: 250, width: 400 }}>
            <button onClick={this.toggle}>Toggle</button>
            <h3>{ this.state.index / children.length }</h3>
            <Slider index={this.state.index}>
              {children}
            </Slider>
            <button onClick={this.back}>Back</button>
            <button onClick={this.forward}>Forward</button>
          </div>
        )
      }
    }

    Keywords

    none

    Install

    npm i react-viewmaster

    DownloadsWeekly Downloads

    16

    Version

    2.0.1

    License

    ISC

    Last publish

    Collaborators

    • dlmanning