Installations

npm install react-rnd-dragline-enhancement

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=10

Node Version

16.17.0

NPM Version

9.5.0 Score

66.8

Supply Chain

84.8

Quality

74.5

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Contributors

1

Unable to fetch Contributors

View all 1 contributors

Languages

3

TypeScript

Less

HTML

TypeScript (94.32%)

Less (3.21%)

HTML (2.48%)

Developer

Ectimi

Download Statistics

Total Downloads

579

Last Day

1

Last Week

3

Last Month

15

Last Year

197

GitHub Statistics

33 Stars

11 Commits

2 Forks

1 Watching

1 Branches

1 Contributors

Bundle Size

54.25 kB

Minified

14.79 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

2.0.4

Package Id

react-rnd-dragline-enhancement@2.0.4

Unpacked Size

133.99 kB

Size

24.61 kB

File Count

20

NPM Version

9.5.0

Node Version

16.17.0

Publised On

17 Feb 2023

Total Downloads

Cumulative downloads

Total Downloads

579

Last day

0%

1

Compared to previous day

Last week

-25%

3

Compared to previous week

Last month

15.4%

15

Compared to previous month

Last year

-48.4%

197

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

@types/react-rnd classnames react-rnd

Peer Dependencies

1

react

Dev Dependencies

14

@size-limit/preset-small-lib @types/react @types/react-dom autoprefixer cssnano husky less react react-dom rollup-plugin-postcss size-limit tsdx tslib typescript

Versions

react-rnd-dragline

这是一个基于 react-rnd 实现的拖拽组件，在rnd的功能基础上增加了拖拽时显示辅助线及吸附的功能。

安装

$ npm i react-rnd-dragline

or

$ yarn add react-rnd-dragline

使用

属性

DragArea
- bounds: RndProps['bounds']
  
  默认值为空 ""
  
  拖拽边界，应用到所有DragItem上，也可以单独在DragItem上使用
- guidelineColor: string
  
  辅助线颜色，默认值：'#448ef7'
- guidelineWidth: number
  
  辅助线宽度,默认值：1
- onAdsorb: boolean
  
  是否开启吸附效果，默认值：ture
- adsorbThreshold: number
  
  吸附阈值，onAdsorb为ture时生效，默认值为：5
DragItem 继承 react-rnd的所有属性，更多属性请参考 react-rnd

注： DragItem的Children样式有padding时，需要设置box-sizing为border-box

使用方法示例

1import { DragArea, DragItem } from 'react-rnd-dragline';
2import './index.less';
3
4export default function IndexPage() {
5  return (
6    <DragArea
7        bounds="body"
8        guidelineColor="red"
9        onAdsorb={true}
10        adsorbThreshold={5}
11      >
12        <DragItem>
13          <div className="t t1">a</div>
14        </DragItem>
15        <DragItem>
16          <div className="t t1">b</div>
17        </DragItem>
18        <DragItem>
19          <div className="t t2">c</div>
20        </DragItem>
21        <DragItem>
22          <div className="t t3">d</div>
23        </DragItem>
24      </DragArea>
25  );
26}
27
28

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-01-13

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More