react-nyan-stroller

Adds NyanCat scroll to the browser! Nyanyanyanyanyanyanya!

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-nyan-stroller
900.0.36 years ago6 years agoMinified + gzip package size for react-nyan-stroller in KB

Readme

Nyanyanyanyanyanyanya! 🙀
Nyan Cat React Custom Scroll Bar
Cat!

<img src="https://img.shields.io/npm/v/react-nyan-stroller.svg?style=flat-square" />

as seen on TV, Atom, Vim, and Google Developer

strolling

----- Based on react-stroller, as long who can better stroll your pages than Cat? Support vertical, horizontal, mixed(horizontal view reflecting vertical scroll) scrolling and dragging. For a page or any scrollable container. Demo
API
Nyan-stroller just overrides scrollBar property of react-stroller. Library exposes 3 components.
  • NyanStrollBarComponent - nyan scroll bar component for React-stroller.
  • NyanStrollBar - standalone scrollbar, to be used on body
  • NyanStrollContainer - stroller container with nyan scroll bar inside.

Example

Just dont forget - this is not "sTroll" - this is "sTroll". Nyan is strolling.

  • this will produce "horizontal" cat-scroller, reacting to the vertical scroll, in position:fixed location.
Will not work if something scrollable exists between ScrollBar and document body.
Do not use this component for any other case due to performance issues and fixed position.
import { NyanStrollBar } from 'react-nyan-stroller';

<NyanStrollBar draggable targetAxis="horizontal" />
{/* if not work - apply override styles */}
<NyanStrollBar draggable axis="vertical" targetAxis="horizontal" overrideLocation="fixed"  />
``` 

- this will produce "vertical" cat-scroller, container. Just place `NyanStrollContainer` inside any "fixed size" block. 
```js
import { NyanStrollContainer } from 'react-nyan-stroller';

<div style={{height:200}}>
  <NyanStrollContainer draggable >
    your content
  </NyanStrollContainer>
</div>

For rest of the possible options - see react-stroller

Size

Animated Nyan itself is 4kb. Plus 4 kb for stroller and faste. Result - around 9kb of 🌈🙀.
Licence
MIT