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

react-scroll

Package Overview
Dependencies
Maintainers
1
Versions
118
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll - npm Package Compare versions

Comparing version 1.8.9 to 1.9.0

modules/__tests__/button-test.js

4

CHANGELOG.md
#### Changelog
> 1.9.0
- Now uses <button> instead of <input /> [PR](https://github.com/fisshy/react-scroll/pull/559)
> 1.8.9

@@ -4,0 +8,0 @@

2

modules/components/Button.js

@@ -38,3 +38,3 @@ "use strict";

return _react2.default.createElement(
'input',
'button',
this.props,

@@ -41,0 +41,0 @@ this.props.children

3

modules/components/Element.js

@@ -45,4 +45,5 @@ "use strict";

// Remove `parentBindings` from props
// Remove `parentBindings` and `name` from props
var newProps = _extends({}, this.props);
delete newProps.name;
if (newProps.parentBindings) {

@@ -49,0 +50,0 @@ delete newProps.parentBindings;

5

modules/mixins/animate-scroll.js

@@ -181,5 +181,6 @@ 'use strict';

_cancelEvents2.default.subscribe(function () {
var setCancel = function setCancel() {
options.data.cancel = true;
});
};
_cancelEvents2.default.subscribe(setCancel);

@@ -186,0 +187,0 @@ setContainer(options);

16

modules/mixins/passive-event-listeners.js

@@ -12,2 +12,12 @@ 'use strict';

var addPassiveEventListener = exports.addPassiveEventListener = function addPassiveEventListener(target, eventName, listener) {
var listenerName = listener.name;
if (!listenerName) {
listenerName = eventName;
console.warn('Listener must be a named function.');
}
if (!attachedListeners.has(eventName)) attachedListeners.set(eventName, new Set());
var listeners = attachedListeners.get(eventName);
if (listeners.has(listenerName)) return;
var supportsPassiveOption = function () {

@@ -26,2 +36,3 @@ var supportsPassiveOption = false;

target.addEventListener(eventName, listener, supportsPassiveOption ? { passive: true } : false);
listeners.add(listenerName);
};

@@ -31,2 +42,5 @@

target.removeEventListener(eventName, listener);
};
attachedListeners.get(eventName).delete(listener.name || eventName);
};
var attachedListeners = new Map();

2

package.json
{
"name": "react-scroll",
"version": "1.8.9",
"version": "1.9.0",
"description": "A scroll component for React.js",

@@ -5,0 +5,0 @@ "main": "modules",

333

README.md

@@ -10,3 +10,8 @@ <h1 align='center'> React Scroll</h1>

```
or
```
$ yarn add react-scroll
```
### Run

@@ -20,2 +25,11 @@

or
```js
$ yarn
$ yarn test
$ yarn start
```
### Examples

@@ -39,124 +53,120 @@

```js
$ npm start
```
### Usage
```js
// ES6 Imports
import * as Scroll from 'react-scroll';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
import React, { useEffect } from 'react';
import { Link, Button, Element, Events, animateScroll as scroll, scrollSpy } from 'react-scroll';
// Or Access Link,Element,etc as follows
let Link = Scroll.Link;
let Button = Scroll.Button;
let Element = Scroll.Element;
let Events = Scroll.Events;
let scroll = Scroll.animateScroll;
let scrollSpy = Scroll.scrollSpy;
const Section = () => {
// ES5
var React = require('react');
var Scroll = require('react-scroll');
var Link = Scroll.Link;
var Button = Scroll.Button;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;
var Section = React.createClass({
componentDidMount: function() {
Events.scrollEvent.register('begin', function(to, element) {
console.log('begin', arguments);
// useEffect is used to perform side effects in functional components.
// Here, it's used to register scroll events and update scrollSpy when the component mounts.
useEffect(() => {
// Registering the 'begin' event and logging it to the console when triggered.
Events.scrollEvent.register('begin', (to, element) => {
console.log('begin', to, element);
});
Events.scrollEvent.register('end', function(to, element) {
console.log('end', arguments);
// Registering the 'end' event and logging it to the console when triggered.
Events.scrollEvent.register('end', (to, element) => {
console.log('end', to, element);
});
// Updating scrollSpy when the component mounts.
scrollSpy.update();
},
componentWillUnmount: function() {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
},
scrollToTop: function() {
// Returning a cleanup function to remove the registered events when the component unmounts.
return () => {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
};
}, []);
// Defining functions to perform different types of scrolling.
const scrollToTop = () => {
scroll.scrollToTop();
},
scrollToBottom: function() {
};
const scrollToBottom = () => {
scroll.scrollToBottom();
},
scrollTo: function() {
scroll.scrollTo(100);
},
scrollMore: function() {
scroll.scrollMore(100);
},
handleSetActive: function(to) {
};
const scrollTo = () => {
scroll.scrollTo(100); // Scrolling to 100px from the top of the page.
};
const scrollMore = () => {
scroll.scrollMore(100); // Scrolling an additional 100px from the current scroll position.
};
// Function to handle the activation of a link.
const handleSetActive = (to) => {
console.log(to);
},
render: function () {
return (
<div>
<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} onSetActive={this.handleSetActive}>
Test 1
</Link>
<Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
Test 2 (delay)
</Link>
<Link className="test6" to="anchor" spy={true} smooth={true} duration={500}>
Test 6 (anchor)
</Link>
<Button activeClass="active" className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >
Test 2
</Button>
};
<Element name="test1" className="element">
test 1
</Element>
// Rendering the component's JSX.
return (
<div>
{/* Link component to scroll to "test1" element with specified properties */}
<Link
activeClass="active"
to="test1"
spy={true}
smooth={true}
offset={50}
duration={500}
onSetActive={handleSetActive}
>
Test 1
</Link>
<Element name="test2" className="element">
test 2
</Element>
{/* Other Link and Button components for navigation, each with their unique properties and targets */}
{/* ... */}
<div id="anchor" className="element">
test 6 (anchor)
</div>
{/* Element components that act as scroll targets */}
<Element name="test1" className="element">
test 1
</Element>
<Element name="test2" className="element">
test 2
</Element>
<div id="anchor" className="element">
test 6 (anchor)
</div>
<Link to="firstInsideContainer" containerId="containerElement">
Go to first element inside container
</Link>
{/* Links to elements inside a specific container */}
<Link to="firstInsideContainer" containerId="containerElement">
Go to first element inside container
</Link>
<Link to="secondInsideContainer" containerId="containerElement">
Go to second element inside container
</Link>
<Link to="secondInsideContainer" containerId="containerElement">
Go to second element inside container
</Link>
<div className="element" id="containerElement">
<Element name="firstInsideContainer">
first element inside container
</Element>
{/* Container with elements inside */}
<div className="element" id="containerElement">
<Element name="firstInsideContainer">
first element inside container
</Element>
<Element name="secondInsideContainer">
second element inside container
</Element>
</div>
<Element name="secondInsideContainer">
second element inside container
</Element>
</div>
{/* Anchors to trigger scroll actions */}
<a onClick={scrollToTop}>To the top!</a>
<br/>
<a onClick={scrollToBottom}>To the bottom!</a>
<br/>
<a onClick={scrollTo}>Scroll to 100px from the top</a>
<br/>
<a onClick={scrollMore}>Scroll 100px more from the current position!</a>
</div>
);
<a onClick={this.scrollToTop}>To the top!</a>
<br/>
<a onClick={this.scrollToBottom}>To the bottom!</a>
<br/>
<a onClick={this.scrollTo}>Scroll to 100px from the top</a>
<br/>
<a onClick={this.scrollMore}>Scroll 100px more from the current position!</a>
</div>
);
}
});
};
React.render(
<Section />,
document.getElementById('example')
);
export default Section;
```

@@ -336,6 +346,12 @@

```js
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
import { animateScroll } from 'react-scroll';
scroll.scrollToTop(options);
const options = {
// your options here, for example:
duration: 500,
smooth: true,
};
animateScroll.scrollToTop(options);
```

@@ -346,6 +362,12 @@

```js
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
import { animateScroll } from 'react-scroll';
scroll.scrollToBottom(options);
const options = {
// Your options here, for example:
duration: 500,
smooth: true,
};
animateScroll.scrollToBottom(options);
```

@@ -356,6 +378,14 @@

```js
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
import { animateScroll } from 'react-scroll';
scroll.scrollTo(100, options);
const options = {
// Your options here, for example:
duration: 500,
smooth: true,
};
// Scroll to 100 pixels from the top of the page
animateScroll.scrollTo(100, options);
```

@@ -368,5 +398,3 @@

```js
var Scroll = require('react-scroll');
var Element = Scroll.Element;
var scroller = Scroll.scroller;
import { Element, scroller } from 'react-scroll';

@@ -382,4 +410,5 @@ <Element name="myScrollToElement"></Element>

offset: 50, // Scrolls to element + 50 pixels down the page
...
})
// ... other options
});
```

@@ -390,6 +419,13 @@

```js
var Scroll = require('react-scroll');
var scroll = Scroll.animateScroll;
import { animateScroll } from 'react-scroll';
scroll.scrollMore(10, options);
const options = {
// Your options here, for example:
duration: 500,
smooth: true,
};
// Scroll an additional 10 pixels down from the current scroll position
animateScroll.scrollMore(10, options);
```

@@ -402,4 +438,3 @@

```js
var Scroll = require('react-scroll');
var Events = Scroll.Events;
import { Events } from 'react-scroll';

@@ -409,2 +444,3 @@ Events.scrollEvent.register('begin', function(to, element) {

});
```

@@ -416,5 +452,8 @@

import { Events } from 'react-scroll';
Events.scrollEvent.register('end', function(to, element) {
console.log('end', to, element);
});
```

@@ -425,4 +464,7 @@

```js
import { Events } from 'react-scroll';
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
```

@@ -434,30 +476,25 @@

```js
var React = require('react');
var Scroll = require('react-scroll');
var ScrollLink = Scroll.ScrollLink;
var ScrollElement = Scroll.ScrollElement;
import React from 'react';
import { ScrollElement, ScrollLink } from 'react-scroll';
var Element = React.createClass({
render: function () {
return (
<div {...this.props} ref={(el) => { this.props.parentBindings.domNode = el; }}>
{this.props.children}
</div>
);
}
});
const Element = (props) => {
return (
<div {...props} ref={(el) => { props.parentBindings.domNode = el; }}>
{props.children}
</div>
);
};
module.exports = ScrollElement(Element);
export const ScrollableElement = ScrollElement(Element);
var Link = React.createClass({
render: function () {
return (
<a {...this.props}>
{this.props.children}
</a>
);
}
});
const Link = (props) => {
return (
<a {...props}>
{props.children}
</a>
);
};
module.exports = ScrollLink(Link);
export const ScrollableLink = ScrollLink(Link);
```

@@ -469,2 +506,4 @@

```js
import { scroller } from 'react-scroll';
scroller.scrollTo('myScrollToElement', {

@@ -475,6 +514,8 @@ duration: 1500,

containerId: 'ContainerElementID',
...
})
// ... other options
});
```
> List of currently available animations:

@@ -481,0 +522,0 @@ 

build/npm/modules/__tests__/animate-scroll-test.js
build/npm/modules/__tests__/animation-type-unit-tests.js
build/npm/modules/__tests__/element-test.js
build/npm/modules/__tests__/events-test.js
build/npm/modules/__tests__/link-test.js
build/npm/modules/__tests__/page-test.js
build/npm/modules/__tests__/scroll-cancellation-test.js
build/npm/modules/__tests__/utility.js
build/npm/modules/components/Button.js
build/npm/modules/components/Element.js
build/npm/modules/components/Link.js
build/npm/modules/index.js
build/npm/modules/mixins/animate-scroll.js
build/npm/modules/mixins/cancel-events.js
build/npm/modules/mixins/Helpers.js
build/npm/modules/mixins/passive-event-listeners.js
build/npm/modules/mixins/scroll-element.js
build/npm/modules/mixins/scroll-events.js
build/npm/modules/mixins/scroll-hash.js
build/npm/modules/mixins/scroll-link.js
build/npm/modules/mixins/scroll-spy.js
build/npm/modules/mixins/scroller.js
build/npm/modules/mixins/smooth.js
build/npm/modules/mixins/utils.js
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc