Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@types/react-scroll
Advanced tools
Type definitions for redux-immutable v3.0.5 from https://www.github.com/DefinitelyTyped/DefinitelyTyped
@types/react-scroll provides TypeScript definitions for the react-scroll library, which is used for smooth scrolling and navigation within a React application.
Smooth Scrolling
This feature allows you to create smooth scrolling links to different sections of your page. The `Link` component is used to create a clickable link that scrolls smoothly to the target `Element`.
import { Link, Element } from 'react-scroll';
const SmoothScrollExample = () => (
<div>
<Link to="section1" smooth={true} duration={500}>Go to Section 1</Link>
<Element name="section1">
<h1>Section 1</h1>
</Element>
</div>
);
Scroll Events
This feature allows you to register and handle scroll events. You can use the `Events` object to register callbacks for the beginning and end of a scroll event, and the `scroller` object to programmatically scroll to a specific element.
import { Events, scroller } from 'react-scroll';
class ScrollEventExample extends React.Component {
componentDidMount() {
Events.scrollEvent.register('begin', function() {
console.log('begin', arguments);
});
Events.scrollEvent.register('end', function() {
console.log('end', arguments);
});
}
componentWillUnmount() {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
}
scrollTo() {
scroller.scrollTo('myScrollToElement', {
duration: 800,
delay: 0,
smooth: 'easeInOutQuart'
});
}
render() {
return (
<div>
<button onClick={this.scrollTo}>Scroll to element</button>
<Element name="myScrollToElement">
<h1>Scroll to me</h1>
</Element>
</div>
);
}
}
Scroll Spy
This feature allows you to highlight navigation links based on the current scroll position. The `spy` prop on the `Link` component enables this functionality, and the `scrollSpy` object is used to update the scroll position.
import { Link, Element, Events, scrollSpy } from 'react-scroll';
class ScrollSpyExample extends React.Component {
componentDidMount() {
Events.scrollEvent.register('begin', function() {
console.log('begin', arguments);
});
Events.scrollEvent.register('end', function() {
console.log('end', arguments);
});
scrollSpy.update();
}
componentWillUnmount() {
Events.scrollEvent.remove('begin');
Events.scrollEvent.remove('end');
}
render() {
return (
<div>
<Link to="section1" spy={true} smooth={true} duration={500}>Section 1</Link>
<Link to="section2" spy={true} smooth={true} duration={500}>Section 2</Link>
<Element name="section1">
<h1>Section 1</h1>
</Element>
<Element name="section2">
<h1>Section 2</h1>
</Element>
</div>
);
}
}
react-router-hash-link provides smooth scrolling to hash links within a React Router application. It is similar to react-scroll but is specifically designed to work with React Router.
react-scrollable-anchor allows you to create scrollable anchor links in a React application. It provides similar smooth scrolling functionality but focuses on anchor links rather than custom elements.
react-scrollspy is a React component that monitors scroll events and updates the active class on navigation links. It is similar to the scroll spy feature in react-scroll but is a standalone package.
npm install --save-dev @types/react-scroll
This package contains type definitions for redux-immutable v3.0.5.
The project URL or description is https://github.com/fisshy/react-scroll
These definitions were written by Pedro Pereira https://github.com/oizie.
Typings were exported from https://www.github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0/react-scroll
Additional Details
FAQs
TypeScript definitions for react-scroll
The npm package @types/react-scroll receives a total of 199,557 weekly downloads. As such, @types/react-scroll popularity was classified as popular.
We found that @types/react-scroll demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.