
Research
/Security News
Critical Vulnerability in NestJS Devtools: Localhost RCE via Sandbox Escape
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
react-swipeable-views-v18
Advanced tools
A replacement for react swipeable views for React 18.
npm install react-swipeable-views-v18
import React, { useRef } from 'react';
import {SwipeableViews} from 'react-swipeable-views';
const App = () => {
const swipeableViewsRef = useRef(null);
const handleSwipeForward = () => {
swipeableViewsRef.current.swipeForward();
};
const handleSwipeBackward = () => {
swipeableViewsRef.current.swipeBackward();
};
const handleResetPosition = () => {
swipeableViewsRef.current.resetPosition();
};
return (
<div>
<SwipeableViews ref={swipeableViewsRef}>
<div>View 1</div>
<div>View 2</div>
<div>View 3</div>
</SwipeableViews>
<button onClick={handleSwipeBackward}>Swipe Backward</button>
<button onClick={handleSwipeForward}>Swipe Forward</button>
<button onClick={handleResetPosition}>Reset Position</button>
</div>
);
};
export default App;
Prop | Type | Default | Description |
---|---|---|---|
autoSwipe | boolean | false | Enable or disable auto-swipe feature. |
autoSwipeInterval | number | 3000 | Auto-swipe interval in milliseconds. |
backButtonProps | object | Props for the backward button. | |
forwardButtonProps | object | Props for the forward button. | |
swipeThreshold | number | 50 | Drag threshold for swipe action. |
loop | boolean | true | Enable or disable looping behavior. |
hideBackButton | boolean | false | Hide the backward button. |
hideForwardButton | boolean | false | Hide the forward button. |
backButtonProps
Prop | Type | Default | Description |
---|---|---|---|
text | string | 'Back' | The text content of the back button. |
disabled | boolean | false | Disable the back button. |
forwardButtonProps
Prop | Type | Default | Description |
---|---|---|---|
text | string | 'Next' | The text content of the forward button. |
disabled | boolean | false | Disable the forward button. |
You can customize the appearance and behavior of the SwipeableViews component by modifying the CSS classes or adding inline styles. The component uses the following CSS classes:
swipeable-container
: The container element that wraps the swipeable views.slider-container
: The container for the views that is translated to achieve the swipe effect.slide
: The individual view elements.pagination
: The pagination dots for navigating between views.dot
: The individual dot element representing a view in the pagination.dot.active
: The active dot element indicating the current view..buttons-container > button
: The forward and backward buttons..buttons-container > button.disabled
: The disabled forward and backward buttons..buttons-container
: The container for the forward and backward buttons.
-.buttons-container > button:after
: The text content of the forward and backward buttons..buttons-container > button:disabled:after
: The text content of the disabled forward and backward buttons..buttons-container > button:active:after
: The text content of the active forward and backward buttons.You can override these classes or provide additional styles to achieve the desired look and feel.
Contributions are welcome! If you find a bug or want to suggest an enhancement, please open an issue or submit a pull request.
This project is licensed under the MIT License.
FAQs
A replacement for react swipeable views for react 18
The npm package react-swipeable-views-v18 receives a total of 238 weekly downloads. As such, react-swipeable-views-v18 popularity was classified as not popular.
We found that react-swipeable-views-v18 demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.