@xailabs/react-minscroll
``` yarn add @xailabs/react-minscroll ``` ``` npm install --save @xailabs/react-minscroll ```
Last updated 3 years ago by loopmode .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @xailabs/react-minscroll 
SYNC missed versions from official npm registry.

react-minscroll

Installation

yarn add @xailabs/react-minscroll
npm install --save @xailabs/react-minscroll

What is it?

A react wrapper component that only renders its children if the window is scrolled below a certain point.

That certain point may be one of these types:

  • number - amount of pixels
  • string - A css selector query that retrieves an Element
  • Element - reference to a DOM node.
  • function - A function that returns any of the previously mentioned types

You specify it using the minScroll prop. If minScroll resolves to an element, it's bottom position will be used (offsetTop + offsetHeight). If you have dynamic heights, maybe in responsive environments, use functions that measure and return the current values.

Example:

import React, {Component} from 'react';
import MinScroll from '@xailabs-minscroll';
export default class MyComponent {
    render() {
        return (
            <MinScroll minScroll={500}>
                I will only be visible when the window was scrolled 500 pixels!
            </MinScroll>
        );
    }
}

Other props

  • offset - Will be added to minScroll
  • offsetNegative - Will be subtracted from minScroll

Both these props take the same types as minScroll (described above).

You might wonder why have a offsetNegative if you can just use offset={-50}. The reason for this is that you can only specify a negative number if the value actually is a number.
Using offsetNegative you can specify a selector or use an Element reference and have its bottom subtracted from minScroll.

You can also combine the two, using offset for smaller corrections:

<MinScroll
    minScroll={'.AppHeader > div > .progress-container .ProgressBar'}
    offsetNegative={'.AppHeader .StickyHeader'}
    offset={-3}
    children={...}
/>

Current Tags

  • 0.0.2                                ...           latest (3 years ago)

2 Versions

  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (15)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |