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.9.0 to 1.9.2

2

package.json
{
"name": "react-scroll-into-view",
"version": "1.9.0",
"version": "1.9.2",
"description": "Simple React element that when clicked scrolls to any element on page",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

@@ -0,1 +1,6 @@

interface ScrollOptions {
behavior?: 'auto' | 'smooth',
block?: 'start' | 'center' | 'end' | 'nearest',
inline?: 'start' | 'center' | 'end' | 'nearest',
}
interface ScrollIntoViewProps {

@@ -8,6 +13,7 @@ selector: string,

className?: string,
scrollOptions?: ScrollOptions
}
const ScrollIntoView: React.FunctionComponent<ScrollIntoViewProps> = props => {}
const ScrollIntoView: React.FunctionComponent<ScrollIntoViewProps> = props => { }
export default ScrollIntoView

@@ -8,3 +8,3 @@ # React scroll-into-view

Fast & declarative way for scrolling to any element on page. Weights only ~450 B minified + gzipped
Fast & declarative way for scrolling to any element on page. Weights only ~1.3 kB minified + gzipped

@@ -55,11 +55,11 @@ ## Idea behind

| 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. |
| 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.<br/> Accepts props: <li> `behavior` (values: `auto` or `smooth`)<li> `block` (`start`, `center`, `end`, or `nearest`)<li> `inline` (`start`, `center`, `end`, or `nearest`) |

@@ -66,0 +66,0 @@ ## Changelog

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