# react-viewmaster

> A react component that slides children in and our of view

Latest version **2.0.1** (published 2016-06-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-viewmaster
pnpm add react-viewmaster
yarn add react-viewmaster
bun add react-viewmaster
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2016-06-23 |
| First published | 2016-05-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David Manning |
| Maintainers | dlmanning |

## Links

- npm: https://www.npmjs.com/package/react-viewmaster
- Repository: https://github.com/dlmanning/react-viewmaster
- Homepage: https://github.com/dlmanning/react-viewmaster#readme
- Issues: https://github.com/dlmanning/react-viewmaster/issues
- npm.io page: https://npm.io/package/react-viewmaster

## Dependencies (1)

- [react-motion](https://npm.io/package/react-motion.md) ^0.4.4

## Recent versions

- 2.0.1 (latest) — 2016-06-23
- 2.0.0 — 2016-06-23
- 1.0.2 — 2016-05-25
- 1.0.1 — 2016-05-25
- 1.0.0 — 2016-05-25

## README

#React Viewmaster

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

## Example usage

```javascript
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>
    )
  }
}
```

---
_Source: https://npm.io/package/react-viewmaster · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._