react-scroll-into-view
Advanced tools
Comparing version 1.8.2 to 1.9.0
@@ -1,1 +0,1 @@ | ||
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react")),ScrollInto=function(e){function t(){var e={behavior:r?"smooth":"instant"};s&&(e.block="start",e.inline="nearest"),document.querySelector(n).scrollIntoView(e)}var o=e.children,n=e.selector,i=e.smooth,r=void 0===i||i,l=e.style,c=void 0===l?{}:l,a=e.alignToTop,s=void 0!==a&&a,u=e.className,f=void 0===u?"":u,d=e.onClick;return React.createElement("div",{style:c,className:f,onClick:function(e){"function"==typeof d?(d(e),setTimeout(t,1e3/60)):t()}},o)};module.exports=ScrollInto; | ||
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react"));function ownKeys(r,e){var t,n=Object.keys(r);return Object.getOwnPropertySymbols&&(t=Object.getOwnPropertySymbols(r),e&&(t=t.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),n.push.apply(n,t)),n}function _objectSpread2(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(t),!0).forEach(function(e){_defineProperty(r,e,t[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))})}return r}function _defineProperty(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _slicedToArray(e,r){return _arrayWithHoles(e)||_iterableToArrayLimit(e,r)||_unsupportedIterableToArray(e,r)||_nonIterableRest()}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _iterableToArrayLimit(e,r){var t=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=t){var n,o,a=[],i=!0,c=!1;try{for(t=t.call(e);!(i=(n=t.next()).done)&&(a.push(n.value),!r||a.length!==r);i=!0);}catch(e){c=!0,o=e}finally{try{i||null==t.return||t.return()}finally{if(c)throw o}}return a}}function _unsupportedIterableToArray(e,r){if(e){if("string"==typeof e)return _arrayLikeToArray(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(t="Object"===t&&e.constructor?e.constructor.name:t)||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(e,r):void 0}}function _arrayLikeToArray(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var validScrollOptions=function(e){var n={};return e instanceof Object&&Object.entries(e).forEach(function(e){var e=_slicedToArray(e,2),r=e[0],t=e[1];switch(r){case"behavior":"auto"!==t&&"smooth"!==t||(n[r]=t);case"block":case"inline":"start"!==t&&"center"!==t&&"end"!==t&&"nearest"!==t||(n[r]=t)}}),n},ScrollInto=function(e){function r(){var e=_objectSpread2({behavior:a?"smooth":"instant"},validScrollOptions(u));c&&(e.block="start",e.inline="nearest"),document.querySelector(n).scrollIntoView(e)}var t=e.children,n=e.selector,o=e.smooth,a=void 0===o||o,i=e.style,o=e.alignToTop,c=void 0!==o&&o,o=e.className,l=e.onClick,e=e.scrollOptions,u=void 0===e?{}:e;return React.createElement("div",{style:void 0===i?{}:i,className:void 0===o?"":o,onClick:function(e){"function"==typeof l?(l(e),setTimeout(r,1e3/60)):r()}},t)};module.exports=ScrollInto; |
{ | ||
"name": "react-scroll-into-view", | ||
"version": "1.8.2", | ||
"version": "1.9.0", | ||
"description": "Simple React element that when clicked scrolls to any element on page", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
# React scroll-into-view | ||
[![Build Status](https://travis-ci.org/dominikbulaj/react-scroll-into-view.svg?branch=master)](https://travis-ci.org/dominikbulaj/react-scroll-into-view) | ||
[![npm](https://img.shields.io/npm/v/react-scroll-into-view.svg)](https://www.npmjs.com/package/react-scroll-into-view) | ||
[![npm version](https://badge.fury.io/js/react-scroll-into-view.svg)](https://badge.fury.io/js/react-scroll-into-view) | ||
[![bundlephobia](https://badgen.net/bundlephobia/minzip/react-scroll-into-view)](https://bundlephobia.com/result?p=react-scroll-into-view) | ||
@@ -10,2 +11,3 @@ [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) | ||
## Idea behind | ||
While developing landing page we needed way to scroll page to focus on registration form. It was obvious we will use [element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) we just need find nice way how to. | ||
@@ -15,9 +17,13 @@ This is just simple React element that provides declarative way to scroll to any element on page when it's clicked. | ||
## Demo | ||
Check out that [codesandbox](https://codesandbox.io/s/14lxm6jmm7) example | ||
## Installation | ||
``` | ||
yarn add react-scroll-into-view | ||
``` | ||
or if you use npm: | ||
``` | ||
@@ -28,3 +34,5 @@ npm i --save react-scroll-into-view | ||
## How to use | ||
First import it | ||
``` | ||
@@ -35,2 +43,3 @@ import ScrollIntoView from 'react-scroll-into-view' | ||
Then use it | ||
``` | ||
@@ -48,15 +57,15 @@ <ScrollIntoView selector="#footer"> | ||
## Props | ||
| Name | Type | Default | Description | ||
| --- | --- | --- | --- | ||
| selector | String | | **Required**. Valid [CSS Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to element to which we want to scroll | ||
| smooth | Boolean | true | Scroll behaviour; when true - transition animation will be smooth. Otherwise instant. | ||
| style | Object | {} | CSS styles passed to element <br>**NOTE** prior v1.4.0 default value was `{display: 'inline'}` | ||
| alignToTop | Boolean | false | Whether top of the element should be aligned to the top of the visible area. Default: aligns to bottom of element | ||
| className | String | | Optional class name to be applied to element | ||
| onClick| Function | | Callback fired on click | ||
| Name | Type | Default | Description | | ||
| ------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| selector | String | | **Required**. Valid [CSS Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to element to which we want to scroll | | ||
| smooth | Boolean | true | Scroll behaviour; when true - transition animation will be smooth. Otherwise instant. | | ||
| style | Object | {} | CSS styles passed to element <br>**NOTE** prior v1.4.0 default value was `{display: 'inline'}` | | ||
| alignToTop | Boolean | false | Whether top of the element should be aligned to the top of the visible area. Default: aligns to bottom of element | | ||
| className | String | | Optional class name to be applied to element | | ||
| onClick | Function | | Callback fired on click | | ||
| scrollOptions | Object | {} | Scroll options. See `scrollIntoViewOptions` on [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters). Only valid properties will be used. | | ||
## Changelog | ||
Please check [releases](https://github.com/dominikbulaj/react-scroll-into-view/releases) tab for full details | ||
## TODO | ||
* support for all [element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) parameters |
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
9570
21
67