rvs
react-viewport-slider
npm i react-viewport-slider
rvs

react-viewport-slider

react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.

by Davi Ferreira

1.0.0 (see all)License:MITTypeScript:Not Found
npm i react-viewport-slider
Readme

Viewport Slider, React

react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.

NPM info

Travis build status Dependency Status devDependency Status

Usage

CommonJS

Install via NPM:

npm install react-viewport-slider

Then:

import Slider from ‘react-viewport-slider’;

…

    render: function () {
        return (
      <Slider>
        <Slider.Item style={{ backgroundColor: '#a2d7c7' }}>
          <div className="content">Hello, world.</div>
        </Slider.Item>
        <Slider.Item style={{ backgroundColor: '#353330' }}>
          <div className="content">Sup?</div>
        </Slider.Item>
        <Slider.Item className="has-overlay" style={{ backgroundImage: `url(${wallpaper})`, backgroundSize: 'cover' }}>
          <div className="content">Yo.</div>
        </Slider.Item>
      </Slider>

        );
    }

…

Browser

Download or install via bower:

bower install react-viewport-slider

Then:

<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-rc1/react.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-rc1/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src=“react-viewport-slider/dist/react-viewport-slider.js” type=“text/javascript” charset=“utf-8”></script>
<script type=“text/jsx”>
React.render(
    <ViewportSlider></ViewportSlider>,
    document.getElementById(‘example’)
);
</script>

development

npm install

npm run demo

npm test

LICENSE

MIT: https://github.com/daviferreira/react-viewport-slider/blob/master/LICENSE

Downloads/wk

1

GitHub Stars

146

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

4

OPEN PRs

0
VersionTagPublished
1.0.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial