Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-scroll-into-view

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll-into-view - npm Package Compare versions

Comparing version 1.8.2 to 1.9.0

2

dist/index.js

@@ -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
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc