https://github.com/nanxiaobei/react-spring-dnd

🕊 A deadly simple drag and drop solution using react-spring
https://github.com/nanxiaobei/react-spring-dnd

Last synced: 6 months ago
JSON representation

🕊 A deadly simple drag and drop solution using react-spring

• Host: GitHub
• URL: https://github.com/nanxiaobei/react-spring-dnd
• Owner: nanxiaobei
• License: mit
• Created: 2020-07-18T17:16:43.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-01-20T08:47:10.000Z (almost 2 years ago)
• Last Synced: 2024-04-27T09:34:30.857Z (over 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 355 KB
• Stars: 14
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          




Create now ➫ [🔗 kee.so](https://kee.so/)



---

# react-spring-dnd 🕊

A deadly simple drag and drop solution using react-spring

[![npm](https://img.shields.io/npm/v/react-spring-dnd.svg?style=flat-square)](https://www.npmjs.com/package/react-spring-dnd)

[![npm](https://img.shields.io/npm/dt/react-spring-dnd?style=flat-square)](https://www.npmtrends.com/react-spring-dnd)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-spring-dnd?style=flat-square)](https://bundlephobia.com/result?p=react-spring-dnd)

[![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-spring-dnd/peer/react?style=flat-square)](https://github.com/facebook/react)

[![GitHub](https://img.shields.io/github/license/nanxiaobei/react-spring-dnd?style=flat-square)](https://github.com/nanxiaobei/react-spring-dnd/blob/main/LICENSE)

---

## Play

[![Edit react-spring-dnd](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-spring-dnd-lnz70?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.jsx)

## Install

```shell

pnpm add react-spring-dnd

# or

yarn add react-spring-dnd

# or

npm i react-spring-dnd

```

## Usage

```jsx

import SpringList from 'react-spring-dnd';

const App = () => {

  return (

    

      {'hello react spring dnd 👋⚛️🌀🦥'.split(' ').map((item) => (

        
{item}

      ))}

    

  );

};

```


## API

| Prop        | Type       | Default | Description                                 |

| ----------- | ---------- | ------- | ------------------------------------------- |

| `row`       | `boolean`  | `false` | Display as row                              |

| `onDragEnd` | `function` | -       | `onDragEnd` callback, `(orderList) => void` |

| `children`  | `array`    | `[]`    | Draggable items                             |

## License

[MIT License](https://github.com/nanxiaobei/react-spring-dnd/blob/main/LICENSE) © [nanxiaobei](https://lee.so/)