Nihilistic Party Mantra

    react-spy-scroll

    0.2.2 • Public • Published

    react-spy-scroll

    Scrollspy components for react

    circleci.com codecov.io Dependency Status devDependency Status peerDependency Status

    How to install

    npm install react-spy-scroll --save
    

    How to use it

    TODO

    The most basic setup

    TODO

    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.

    Anchor

    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

    AnchorElement

    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)

    ScrollPanel

    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"
    

    Install

    npm i react-spy-scroll

    DownloadsWeekly Downloads

    33

    Version

    0.2.2

    License

    X11

    Unpacked Size

    995 kB

    Total Files

    84

    Last publish

    Collaborators

    • nutgaard