Nyanyanyanyanyanyanya! 🙀
Nyan Cat React Custom Scroll Bar
<img src="https://img.shields.io/npm/v/react-nyan-stroller.svg?style=flat-square" />
as seen on TV, Atom, Vim, and Google Developer
----- 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.
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