Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nosferatu500/react-dnd-scrollzone
Advanced tools
@nosferatu500/react-dnd-scrollzone - npm Package Compare versions
Comparing version 3.0.0-alpha.2 to 3.0.0
| { | ||
| "name": "@nosferatu500/react-dnd-scrollzone", | ||
| "version": "3.0.0-alpha.2", | ||
| "version": "3.0.0", | ||
| "description": "A cross browser solution to scrolling during drag and drop.", | ||
@@ -47,5 +47,5 @@ "main": "./index.js", | ||
| "peerDependencies": { | ||
| "react": ">=17.0.2", | ||
| "react-dnd": ">=15.1.2", | ||
| "react-dom": ">=17.0.2" | ||
| "react": "^17.x || 18.x", | ||
| "react-dnd": ">=16.0.1", | ||
| "react-dom": "^17.x || 18.x" | ||
| }, | ||
@@ -52,0 +52,0 @@ "browserslist": { |
162
README.md
| # react-beautifull-dnd-scrollzone | ||
| Forked from https://github.com/azuqua/react-dnd-scrollzone with support for react-dnd@7. | ||
| Forked from https://github.com/azuqua/react-dnd-scrollzone with support for react-dnd@16. | ||
@@ -10,26 +10,28 @@ Cross browser compatible scrolling containers for drag and drop interactions. | ||
| ```js | ||
| import React, { Component } from 'react'; | ||
| import { DragDropContextProvider } from 'react-dnd'; | ||
| import HTML5Backend from 'react-dnd-html5-backend'; | ||
| import withScrolling from 'react-dnd-scrollzone'; | ||
| import DragItem from './DragItem'; | ||
| import './App.css'; | ||
| import React from 'react' | ||
| import { HTML5Backend } from 'react-dnd-html5-backend' | ||
| import { DndProvider } from 'react-dnd' | ||
| import withScrolling, {createVerticalStrength, createHorizontalStrength} from '@nosferatu500/react-dnd-scrollzone' | ||
| import {DragItem} from './DragItem' | ||
| import './App.css' | ||
| const ScrollingComponent = withScrolling('div'); | ||
| const ScrollingComponent = withScrolling( | ||
| React.forwardRef((props, ref) => { | ||
| const {dragDropManager, ...otherProps} = props; | ||
| return <div ref={ref} {...otherProps} /> | ||
| })) | ||
| const ITEMS = [1,2,3,4,5,6,7,8,9,10]; | ||
| const ITEMS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] | ||
| export default class App extends Component { | ||
| render() { | ||
| return ( | ||
| <DragDropContextProvider backend={HTML5Backend}> | ||
| <ScrollingComponent className="App"> | ||
| {ITEMS.map(n => ( | ||
| <DragItem key={n} label={`Item ${n}`} /> | ||
| ))} | ||
| </ScrollingComponent> | ||
| </DragDropContextProvider> | ||
| ); | ||
| } | ||
| } | ||
| const verticalStrength = createVerticalStrength(150); | ||
| const horizontalStrength = createHorizontalStrength(150); | ||
| const App = () => ( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <ScrollingComponent className="App" verticalStrength={verticalStrength} horizontalStrength={horizontalStrength}> | ||
| {ITEMS.map((n) => ( | ||
| <DragItem key={n} label={`Item ${n}`} /> | ||
| ))} | ||
| </ScrollingComponent> | ||
| </DndProvider> | ||
| ``` | ||
@@ -39,97 +41,20 @@ | ||
| ### Easing Example | ||
| ##### Example | ||
| ```js | ||
| import React, { Component } from 'react'; | ||
| import { DragDropContextProvider } from 'react-dnd'; | ||
| import HTML5Backend from 'react-dnd-html5-backend'; | ||
| import withScrolling, { createHorizontalStrength, createVerticalStrength } from 'react-dnd-scrollzone'; | ||
| import DragItem from './DragItem'; | ||
| import './App.css'; | ||
| import withScrolling, { createVerticalStrength, createHorizontalStrength } from '@nosferatu500/react-dnd-scrollzone'; | ||
| const Scrollzone = withScrolling('ul'); | ||
| const vStrength = createVerticalStrength(500); | ||
| const hStrength = createHorizontalStrength(300); | ||
| const ScrollZone = withScrolling('ul'); | ||
| const linearHorizontalStrength = createHorizontalStrength(150); | ||
| const linearVerticalStrength = createVerticalStrength(150); | ||
| const ITEMS = [1,2,3,4,5,6,7,8,9,10]; | ||
| // zone will scroll when the cursor drags within | ||
| // 500px of the top/bottom and 300px of the left/right | ||
| const zone = ( | ||
| <Scrollzone verticalStrength={vStrength} horizontalStrength={hStrength}> | ||
| // this easing function is from https://gist.github.com/gre/1650294 and | ||
| // expects/returns a number between [0, 1], however strength functions | ||
| // expects/returns a value between [-1, 1] | ||
| function ease(val) { | ||
| const t = (val + 1) / 2; // [-1, 1] -> [0, 1] | ||
| const easedT = t<.5 ? 2*t*t : -1+(4-2*t)*t; | ||
| return easedT * 2 - 1; // [0, 1] -> [-1, 1] | ||
| } | ||
| function hStrength(box, point) { | ||
| return ease(linearHorizontalStrength(box, point)); | ||
| } | ||
| function vStrength(box, point) { | ||
| return ease(linearVerticalStrength(box, point)); | ||
| } | ||
| export default App(props) { | ||
| return ( | ||
| <DragDropContextProvider backend={HTML5Backend}> | ||
| <ScrollingComponent | ||
| className="App" | ||
| verticalStrength={vStrength} | ||
| horizontalStrength={hStrength} > | ||
| {ITEMS.map(n => ( | ||
| <DragItem key={n} label={`Item ${n}`} /> | ||
| ))} | ||
| </ScrollingComponent> | ||
| </DragDropContextProvider> | ||
| ); | ||
| } | ||
| </Scrollzone> | ||
| ); | ||
| ``` | ||
| Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`. | ||
| ### Virtualized Example | ||
| Since react-dnd-scrollzone utilizes the Higher Order Components (HOC) pattern, drag and drop scrolling behaviour can easily be added to existing components. For example to speedup huge lists by using [react-virtualized](https://github.com/bvaughn/react-virtualized) for a windowed view where only the visible rows are rendered: | ||
| ```js | ||
| import React from 'react'; | ||
| import { DragDropContextProvider } from 'react-dnd'; | ||
| import HTML5Backend from 'react-dnd-html5-backend'; | ||
| import withScrolling from 'react-dnd-scrollzone'; | ||
| import { List } from 'react-virtualized'; | ||
| import DragItem from './DragItem'; | ||
| import './App.css'; | ||
| const ScrollingVirtualList = withScrolling(List); | ||
| // creates array with 1000 entries | ||
| const ITEMS = Array.from(Array(1000)).map((e,i)=> `Item ${i}`); | ||
| export default App(props) { | ||
| return ( | ||
| <DragDropContextProvider backend={HTML5Backend}> | ||
| <ScrollingVirtualList | ||
| className="App" | ||
| height={600} | ||
| width={800} | ||
| rowCount={ITEMS.length} | ||
| rowHeight={34} | ||
| rowRenderer={ | ||
| ({ key, index, style }) => ( | ||
| <DragItem | ||
| key={key} | ||
| style={style} | ||
| label={ITEMS[index]} | ||
| /> | ||
| ) | ||
| } | ||
| /> | ||
| </DragDropContextProvider> | ||
| ); | ||
| } | ||
| ``` | ||
| ### API | ||
@@ -171,18 +96,1 @@ | ||
| ##### Example | ||
| ```js | ||
| import withScrolling, { createVerticalStrength, createHorizontalStrength } from 'react-dnd-scrollzone'; | ||
| const Scrollzone = withScrolling('ul'); | ||
| const vStrength = createVerticalStrength(500); | ||
| const hStrength = createHorizontalStrength(300); | ||
| // zone will scroll when the cursor drags within | ||
| // 500px of the top/bottom and 300px of the left/right | ||
| const zone = ( | ||
| <Scrollzone verticalStrength={vStrength} horizontalStrength={hStrength}> | ||
| </Scrollzone> | ||
| ); | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-8.82%
26601
- Number of lines in readme file
- decreased by-49.46%
94
No dependency changes