Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-intersection-observer
Advanced tools
react-intersection-observer - npm Package Compare versions
Comparing version 2.0.0 to 2.0.1
| { | ||
| "name": "react-intersection-observer", | ||
| "version": "2.0.0", | ||
| "version": "2.0.1", | ||
| "description": "Monitor if a component is inside the viewport, using IntersectionObserver API", | ||
| "main": "lib/index.js", | ||
| "author": "Daniel Schmidt", | ||
| "typings": "index.d.ts", | ||
| "repository": { | ||
@@ -29,3 +30,3 @@ "type": "git", | ||
| "prepublish": "npm run build", | ||
| "pretty": "prettier '{src,tests,stories}/**/*.js' --write --no-semi --single-quote --trailing-comma all", | ||
| "pretty": "prettier '**/*.{js,md,json}' --write", | ||
| "storybook": "start-storybook -p 9000", | ||
@@ -65,18 +66,18 @@ "test": "eslint {src,stories,tests}/. && jest" | ||
| "devDependencies": { | ||
| "@storybook/addon-actions": "^3.2.12", | ||
| "@storybook/addon-options": "^3.2.12", | ||
| "@storybook/react": "^3.2.12", | ||
| "@storybook/addon-actions": "^3.2.14", | ||
| "@storybook/addon-options": "^3.2.14", | ||
| "@storybook/react": "^3.2.14", | ||
| "babel-cli": "^6.24.1", | ||
| "babel-core": "^6.25.0", | ||
| "babel-jest": "^21.2.0", | ||
| "babel-preset-env": "^1.6.0", | ||
| "babel-preset-env": "^1.6.1", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-2": "^6.24.1", | ||
| "concurrently": "3.5.0", | ||
| "enzyme": "^3.1.0", | ||
| "enzyme-adapter-react-16": "^1.0.2", | ||
| "enzyme-to-json": "^3.1.3", | ||
| "eslint": "^4.9.0", | ||
| "enzyme": "^3.1.1", | ||
| "enzyme-adapter-react-16": "^1.0.4", | ||
| "enzyme-to-json": "^3.2.2", | ||
| "eslint": "^4.10.0", | ||
| "eslint-config-insilico": "^5.0.1", | ||
| "flow-bin": "^0.57.3", | ||
| "flow-bin": "^0.59.0", | ||
| "flow-copy-source": "^1.2.1", | ||
@@ -86,4 +87,4 @@ "husky": "^0.14.3", | ||
| "jest": "^21.2.1", | ||
| "lint-staged": "^4.2.3", | ||
| "prettier": "^1.7.4", | ||
| "lint-staged": "^4.3.0", | ||
| "prettier": "^1.8.1", | ||
| "react": "^16.0.0", | ||
@@ -90,0 +91,0 @@ "react-dom": "^16.0.0", |
@@ -8,3 +8,5 @@ # react-intersection-observer | ||
| React component that triggers a function when the component enters or leaves the viewport. No complex configuration needed, just wrap your views and it handles the events. | ||
| React component that triggers a function when the component enters or leaves the | ||
| viewport. No complex configuration needed, just wrap your views and it handles | ||
| the events. | ||
@@ -20,10 +22,17 @@ ```js | ||
| ## Demo | ||
| See https://thebuilder.github.io/react-intersection-observer/ for a demo. | ||
| #### Scroll monitor | ||
| This module is used in [react-scroll-percentage](https://github.com/thebuilder/react-scroll-percentage) to monitor the scroll position of elements in view. This module is also a great example of using `react-intersection-observer` as the basis for more complex needs. | ||
| This module is used in | ||
| [react-scroll-percentage](https://github.com/thebuilder/react-scroll-percentage) | ||
| to monitor the scroll position of elements in view. This module is also a great | ||
| example of using `react-intersection-observer` as the basis for more complex | ||
| needs. | ||
| ## Installation | ||
| Install using [Yarn](https://yarnpkg.com): | ||
| ```sh | ||
@@ -34,2 +43,3 @@ yarn add react-intersection-observer | ||
| or NPM: | ||
| ```sh | ||
@@ -40,6 +50,13 @@ npm install react-intersection-observer --save | ||
| ### Polyfill for intersection-observer | ||
| The component requires the [intersection-observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to be available on the global namespace. At the moment you should include a polyfill to ensure support in all browsers. | ||
| You can import the [polyfill](https://yarnpkg.com/en/package/intersection-observer) directly or use a service like [polyfill.io](https://polyfill.io/v2/docs/) that can add it when needed. | ||
| The component requires the [intersection-observer | ||
| API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) | ||
| to be available on the global namespace. At the moment you should include a | ||
| polyfill to ensure support in all browsers. | ||
| You can import the | ||
| [polyfill](https://yarnpkg.com/en/package/intersection-observer) directly or use | ||
| a service like [polyfill.io](https://polyfill.io/v2/docs/) that can add it when | ||
| needed. | ||
| ```sh | ||
@@ -55,4 +72,5 @@ yarn add intersection-observer | ||
| If you are using Webpack (or similar) you could use [dynamic imports](https://webpack.js.org/api/module-methods/#import-), to load the Polyfill only if needed. | ||
| A basic implementation could look something like this: | ||
| If you are using Webpack (or similar) you could use [dynamic | ||
| imports](https://webpack.js.org/api/module-methods/#import-), to load the | ||
| Polyfill only if needed. A basic implementation could look something like this: | ||
@@ -83,19 +101,19 @@ ```js | ||
| } | ||
| ``` | ||
| ## Props | ||
| The **`<Observer />`** accepts the following props: | ||
| | Name | Type | Default | Required | Description | | ||
| | ---------------- | ----------- | ----------------- | -------- | ----------------------------------------------------- | | ||
| | children | func/node | | true | Children should be either a function or a node | | ||
| | root | HTMLElement | | false | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null. | | ||
| | rootId | String | | false | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. | | ||
| | rootMargin | String | '0px' | false | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). | | ||
| | tag | String | 'div' | false | Element tag to use for the wrapping component | | ||
| | threshold | Number | 0 | false | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. | | ||
| | triggerOnce | Bool | false | false | Only trigger this method once | | ||
| | onChange | Func | | false | Call this function whenever the in view state changes | | ||
| | render | Func | | false | Use render method to only render content when inView | | ||
| | Name | Type | Default | Required | Description | | ||
| | ----------- | ----------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | children | func/node | | true | Children should be either a function or a node | | ||
| | root | HTMLElement | | false | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null. | | ||
| | rootId | String | | false | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. | | ||
| | rootMargin | String | '0px' | false | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). | | ||
| | tag | String | 'div' | false | Element tag to use for the wrapping component | | ||
| | threshold | Number | 0 | false | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. | | ||
| | triggerOnce | Bool | false | false | Only trigger this method once | | ||
| | onChange | Func | | false | Call this function whenever the in view state changes | | ||
| | render | Func | | false | Use render method to only render content when inView | | ||
@@ -105,4 +123,6 @@ ## Example code | ||
| ### Child as function | ||
| The default way to use the `Observer`, is to pass a function as the child. It will be called whenever the state changes, with the new value of `inView`. | ||
| The default way to use the `Observer`, is to pass a function as the child. It | ||
| will be called whenever the state changes, with the new value of `inView`. | ||
| ```js | ||
@@ -117,4 +137,6 @@ import Observer from 'react-intersection-observer' | ||
| ### Render callback | ||
| For simple use cases where you want to only render a component when it enters view, you can use the `render` prop. | ||
| For simple use cases where you want to only render a component when it enters | ||
| view, you can use the `render` prop. | ||
| ```js | ||
@@ -141,7 +163,7 @@ import Observer from 'react-intersection-observer' | ||
| ### OnChange callback | ||
| You can monitor the onChange method, and control the state in your own component. | ||
| The child node will always be rendered. | ||
| You can monitor the onChange method, and control the state in your own | ||
| component. The child node will always be rendered. | ||
| ```js | ||
@@ -148,0 +170,0 @@ import Observer from 'react-intersection-observer' |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.89%
42209
- Number of package files
- increased by30%
13
- Lines of code
- increased by9.88%
556
- Number of lines in readme file
- increased by14.97%
169
No dependency changes