Nihilistic Party Mantra


    0.2.2 • Public • Published


    Scrollspy components for react Dependency Status devDependency Status peerDependency Status

    How to install

    npm install react-spy-scroll --save

    How to use it


    The most basic setup


    The default behaviour

    The library introduces four components; AnchorLink, AnchorButton, AnchorElement and ScrollPanel. The link and button are simple a and button tags wrapped in the Anchor component for ease of use.

    To get startet you only need some AnchorXXXXs and AnchorElements with matching href and id props. If you want a scrolling area within your page, e.g. not a page-scroll, you can wrap your AnhorElements in a ScrollPanel.

    AnchorElements have useful defaults by them self, but will inherit configuration from its parent ScrollPanel if one exists. If by change a AnchorElement defines a props which is also present at its parent ScrollPanel then the AnchorElements config will be used.


    PropName PropType Default Description
    href PT.string.isRequired None Reference to AnchorElement's id
    onClick PT.func None onClick handler
    activeClass PT.string scroll-spy-active The class given to an Anchor when its AnchorElement is active


    PropName PropType Default Description
    id PT.string.isRequired None An elements id
    offset PT.number None Scroll offset
    children PT.element.isRequired None React children
    isInside PT.func See below Checking if element is in view
    isInside: (scrollOffset, elemTopBound, elemBottomBound) =>
            (scrollOffset >= elemTopBound && scrollOffset <= elemBottomBound)


    PropName PropType Default Description
    offset PT.number 0 Scroll offset
    events PT.object {} Callbacks for start/end of scroll
    animate PT.bool true Animated scroll
    tag PT.string div DOM-tag
    className PT.string scroll-panel Classname
    children PT.arrayOf(PT.element) None React-children

    Peer dependencies

    This component has the newest react and react-router as peerdependenies, but will most likely work with lower version. If you test the component with lower versions of react and/or react-router please let me know so that the dependencies can be adjusted.

    "react": "^0.14.7 || ^15.0.1"
    "react-dom": "^0.14.7 || ^15.0.1"


    npm i react-spy-scroll

    DownloadsWeekly Downloads






    Unpacked Size

    995 kB

    Total Files


    Last publish


    • nutgaard