react-sortablejs - npm Package Compare versions

dist/index.d.ts

dist/index.d.ts.map

dist/index.es.js

dist/index.js

dist/react-sortable.d.ts

dist/react-sortable.d.ts.map

dist/types.d.ts

dist/types.d.ts.map

dist/util.d.ts

dist/util.d.ts.map

115

package.json

		{
		"name": "react-sortablejs",
		"version": "1.5.1",
		"description": "A React component built on top of Sortable (https://github.com/SortableJS/Sortable).",
		"main": "lib/index.js",
		"scripts": {
		"prepublish": "npm run eslint && npm test && npm run build && npm run dist && npm run build-examples && npm run release",
		"build": "babel --out-dir ./lib ./src",
		"build-examples": "cd examples; webpack-cli",
		"dist": "webpack-cli; BUILD_ENV=dist webpack-cli",
		"release": "mkdir -p releases; cp -f dist/react-sortable.js releases/react-sortable-${npm_package_version}.js; cp -f dist/react-sortable.min.js releases/react-sortable-${npm_package_version}.min.js",
		"eslint": "eslint ./src",
		"precommit-check": "npm run eslint",
		"test": "tap test/*.js --node-arg=--require --node-arg=@babel/register --node-arg=--require --node-arg=@babel/polyfill",
		"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=@babel/register --nyc-arg=--require --nyc-arg=@babel/polyfill \| coveralls",
		"dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
		"author": {
		"name": "Wayne Van Son",
		"email": "waynevspersonal@gmail.com"
		},
		"pre-commit": [
		"precommit-check"
		"license": "MIT",
		"version": "2.0.0",
		"private": false,
		"main": "dist/index.js",
		"module": "dist/index.es.js",
		"types": "dist/index.d.ts",
		"files": [
		"dist",
		"local-types"
		],
		"repository": {
		"type": "git",
		"url": "git+https://github.com/SortableJS/react-sortablejs.git"
		"scripts": {
		"start": "parcel examples/index.html --out-dir temp/server --cache-dir temp/cache ",
		"build": "yarn build:rollup && yarn build:tsc",
		"build:rollup": " rollup --config config/rollup.config.js",
		"build:tsc": "ts-node config/move-files.ts",
		"watch": "parcel watch src/index.ts",
		"examples": "parcel build examples/index.html --out-dir docs",
		"examples:static": "ts-node examples/scripts/build-examples.tsx && parcel build examples/scripts/index.html --out-dir docs",
		"test": "yarn testcafe --app \"yarn start\" --speed 0.5 chrome ./tests/index.ts "
		},
		"author": "Cheton Wu <cheton@gmail.com>",
		"license": "MIT",
		"bugs": {
		"url": "https://github.com/SortableJS/react-sortablejs/issues"
		},
		"homepage": "https://github.com/SortableJS/react-sortablejs",
		"keywords": [
		"react",
		"react-component",
		"sortable",
		"reorder",
		"drag",
		"mixin"
		],
		"peerDependencies": {
		"react": ">=15.0.0",
		"react-dom": ">=15.0.0",
		"sortablejs": "^1.6.1"
		"react": "^16.9.0",
		"react-dom": "^16.9.0"
		},
		"dependencies": {
		"prop-types": ">=15.0.0"
		"@types/sortablejs": "^1.10.0",
		"sortablejs": "1.10.1"
		},
		"devDependencies": {
		"@babel/cli": "~7.2.3",
		"@babel/core": "~7.2.2",
		"@babel/polyfill": "~7.2.5",
		"@babel/preset-env": "~7.2.3",
		"@babel/preset-react": "~7.0.0",
		"@babel/register": "~7.0.0",
		"@trendmicro/babel-config": "~1.0.0-alpha",
		"@trendmicro/react-anchor": "~0.5.6",
		"@trendmicro/react-buttons": "~1.3.1",
		"babel-eslint": "~10.0.1",
		"babel-loader": "~8.0.4",
		"coveralls": "~3.0.2",
		"eslint": "~5.11.1",
		"eslint-config-trendmicro": "~1.4.1",
		"eslint-loader": "~2.1.1",
		"eslint-plugin-import": "~2.14.0",
		"eslint-plugin-jsx-a11y": "~6.1.2",
		"eslint-plugin-react": "~7.11.1",
		"html-webpack-plugin": "~3.2.0",
		"lodash": "~4.17.4",
		"nib": "~1.1.2",
		"react": ">=15.0.0",
		"react-dom": ">=15.0.0",
		"sortablejs": "~1.6.1",
		"stylus-loader": "~3.0.1",
		"tap": "~12.1.1",
		"terser-webpack-plugin": "~1.2.1",
		"webpack": "~4.28.2",
		"webpack-cli": "~3.1.2",
		"webpack-dev-server": "~3.1.14",
		"which": "~1.2.14"
		"@fortawesome/fontawesome-svg-core": "^1.2.25",
		"@fortawesome/free-solid-svg-icons": "^5.11.2",
		"@fortawesome/react-fontawesome": "^0.1.7",
		"@testing-library/jest-dom": "^4.1.0",
		"@testing-library/react": "^9.1.4",
		"@types/cheerio": "^0.22.15",
		"@types/node": "12.7.5",
		"@types/react": "16.9.2",
		"@types/react-dom": "16.9.0",
		"@types/styled-components": "^4.1.19",
		"cheerio": "^1.0.0-rc.3",
		"copy-dir": "^1.2.0",
		"parcel-bundler": "^1.12.4",
		"react": "^16.9.0",
		"react-dom": "^16.9.0",
		"rollup": "^1.27.8",
		"rollup-plugin-commonjs": "^10.1.0",
		"rollup-plugin-typescript2": "^0.25.3",
		"styled-components": "^4.3.2",
		"testcafe": "^1.7.0",
		"ts-node": "^8.5.4",
		"typescript": "^3.6.3"
		}
		}

464

README.md

		@@ -1,272 +0,300 @@
		# react-sortablejs [![build status](https://travis-ci.org/SortableJS/react-sortablejs.svg?branch=master)](https://travis-ci.org/SortableJS/react-sortablejs) [![Coverage Status](https://coveralls.io/repos/github/SortableJS/react-sortablejs/badge.svg?branch=master)](https://coveralls.io/github/SortableJS/react-sortablejs?branch=master)
		# `react-sortablejs`

		[![NPM](https://nodei.co/npm/react-sortablejs.png?downloads=true&stars=true)](https://www.npmjs.com/package/react-sortablejs)
		React component wrapping [SortableJS](https://github.com/SortableJS/Sortable)!

		A React component built on top of Sortable (https://github.com/SortableJS/Sortable).
		We're now on version 2.0! A major API overhaul with typescript types.

		- Demo: https://sortablejs.github.io/react-sortablejs/
		Consider trying it out if you had any troubles earlier.

		The [sample code](https://github.com/SortableJS/react-sortablejs/blob/master/examples/index.jsx) can be found in the [examples](https://github.com/SortableJS/react-sortablejs/tree/master/examples) directory.
		## Things still to do.

		## Notice
		There is a major breaking change since v1.0. Checkout [Migration Guide](https://github.com/SortableJS/react-sortablejs/wiki/Migration-Guide) while upgrading from earlier versions.
		We've released version 2.0,

		- [x] Create examples from [SortableJS Examples](https://sortablejs.github.io/Sortable/)
		- [ ] Create all tests for examples (for 'ron)
		- Currently weve got a few.
		- [ ] Test the following UI component libraries:
		- [x] Styled Components
		- [ ] AntD
		- [ ] MaterialUI
		- [ ] React Bootstrap
		- [ ] React Grommet
		- [ ] React Toolbox
		- [ ] Your suggestion? :)

		## Features

		### SortableJS

		Everything you love about SortableJS, including to but not limited to:

		- [x] Drag and Drop between lists
		- [x] Multidrag and Swap plugin support.

		### Component Specific

		- [x] Calculates items in list automatically
		- [x] Updated API via `props`. Feels more like react than ever before.
		- [x] Compatible with third part UI libraries
		- [x] SortableJS Plugin Support

		If you find any features lacking, create an issue and/or pull request.

		## Installation

		### Webpack or Browserify
		The easiest way to use react-sortablejs is to install it from npm and include it in your React build process using webpack or browserify.
		```bash
		npm install --save react react-dom sortablejs@1.6.1 # Install peerDependencies
		npm install --save react-sortablejs
		```shell
		npm install --save react-sortablejs-typescript
		# OR
		yarn add react-sortablejs-typescript
		```

		Checkout the [examples](https://github.com/SortableJS/react-sortablejs/tree/dev/examples) directory for a complete setup.
		## What you should endeavour to know.

		### Standalone ES5 module
		You can create a standalone ES5 module as shown below:
		```bash
		$ git clone https://github.com/SortableJS/react-sortablejs.git
		$ cd react-sortablejs
		$ npm install
		$ npm run build && npm run dist
		```
		- Explore the [Sortable Options API](https://github.com/SortableJS/Sortable#options)
		- Array.map
		- React.forwardRef

		Then, include these scripts into your html file:
		```html
		<body>
		<div id="container"></div>
		<script src="http://fb.me/react-0.14.7.js"></script>
		<script src="http://fb.me/react-dom-0.14.7.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
		<script src="dist/react-sortable.min.js"></script>
		</body>
		```
		## Usage/Examples

		Use <b><ReactSortable /></b> instead of <b><Sortable /></b> in your JSX code since the Sortable library will export a <b>window.Sortable</b> object if you're running JSX code directly in the browser. For example:
		```js
		<ReactSortable
		tag="ul"
		onChange={(order) =>
		this.props.onChange(order);
		}}
		>
		{items}
		</ReactSortable>
		### Function Component

		```tsx
		import React, { FC, useState } from "react";
		import { ReactSortable } from "react-sortablejs-typescript";

		interface ItemType {
		id: number;
		name: string;
		}

		export const BasicFunction: FC = props => {
		const [state, setState] = useState<ItemType[]>([
		{ id: 1, name: "shrek" },
		{ id: 2, name: "fiona" }
		]);

		return (
		<ReactSortable list={state} setList={setState}>
		{state.map(item => (
		<div key={item.id}>{item.name}</div>
		))}
		</ReactSortable>
		);
		};
		```

		## Usage
		File: sortable-list.jsx
		```js
		import uniqueId from 'lodash/uniqueId';
		import React from 'react';
		import Sortable from 'react-sortablejs';
		### Class Component

		// Functional Component
		const SortableList = ({ items, onChange }) => {
		let sortable = null; // sortable instance
		const reverseOrder = (evt) => {
		const order = sortable.toArray();
		onChange(order.reverse());
		};
		const listItems = items.map(val => (<li key={uniqueId()} data-id={val}>List Item: {val}</li>));
		```tsx
		import React, { Component } from "react";
		import { ReactSortable } from "react-sortablejs-typescript";

		interface BasicClassState {
		list: { id: string; name: string }[];
		}

		export class BasicClass extends Component<{}, BasicClassState> {
		state: BasicClassState = {
		list: [{ id: "1", name: "shrek" }]
		};
		render() {
		return (
		<div>
		<button type="button" onClick={reverseOrder}>Reverse Order</button>
		<Sortable
		// Sortable options (https://github.com/RubaXa/Sortable#options)
		options={{
		}}
		<ReactSortable
		list={this.state.list}
		setList={newState => this.setState({ list: newState })}
		>
		{this.state.list.map(item => (
		<div key={item.id}>{item.name}</div>
		))}
		</ReactSortable>
		);
		}
		}
		```

		// [Optional] Use ref to get the sortable instance
		// https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
		ref={(c) => {
		if (c) {
		sortable = c.sortable;
		}
		}}
		### ReactSortable renders a `div` as the parent by default.

		// [Optional] A tag or react component to specify the wrapping element. Defaults to "div".
		// In a case of a react component it is required to has children in the component
		// and pass it down.
		tag="ul"
		ReactSortable is a `div` element by default. This can be changed to be any HTML element (for example `ul`, `ol`)
		or can be a React component.

		// [Optional] The onChange method allows you to implement a controlled component and keep
		// DOM nodes untouched. You have to change state to re-render the component.
		// @param {Array} order An ordered array of items defined by the `data-id` attribute.
		// @param {Object} sortable The sortable instance.
		// @param {Event} evt The event object.
		onChange={(order, sortable, evt) => {
		onChange(order);
		}}
		>
		{listItems}
		</Sortable>
		</div>
		);
		};
		This value, be the component or the HTML element should be passed down under `props.tag`.

		SortableList.propTypes = {
		items: React.PropTypes.array,
		onChange: React.PropTypes.func
		};
		Let's explore both here.

		export default SortableList;
		```
		#### HTML Element

		File: index.jsx
		```js
		import React from 'react';
		import ReactDOM from 'react-dom';
		import SortableList from './sortable-list';
		Here we will use a `ul`. You can use any HTML.
		Just add the string and ReactSortable will use a `li` instead of a `div`.

		class App extends React.Component {
		state = {
		items: [1, 2, 3, 4, 5, 6]
		};
		```tsx
		import React, { FC, useState, forwardRef } from "react";
		import { ReactSortable } from "react-sortablejs-typescript";

		render() {
		return (
		<SortableList
		items={this.state.items}
		onChange={(items) => {
		this.setState({ items });
		}}
		>
		</SortableList>
		)
		}
		interface ItemType {
		id: string;
		name: string;
		}

		export const BasicFunction: FC = props => {
		const [state, setState] = useState<ItemType[]>([{ id: "1", name: "shrek" }]);

		return (
		<ReactSortable tag="ul" list={state} setList={setState}>
		{state.map(item => (
		<div key={item.id}>{item.name}</div>
		))}
		</ReactSortable>
		);
		};

		ReactDOM.render(
		<App />,
		document.getElementById('container')
		);
		```

		## Examples
		#### Custom Component

		### Uncontrolled Component
		An uncontrolled component allows [Sortable](https://github.com/RubaXa/Sortable) to touch DOM nodes. It's useful when you don't need to maintain any state changes.
		When using a custom component in the `tag` prop, the only component it allows is a `forwardRef` component.

		```js
		import uniqueId from 'lodash/uniqueId';
		import React from 'react';
		import ReactDOM from 'react-dom';
		import Sortable from 'react-sortablejs';
		#### Solution

		class App extends React.Component {
		state = {
		items: ['Apple', 'Banana', 'Cherry', 'Guava', 'Peach', 'Strawberry']
		};
		If it doesn't have one, you can add one using `React.forwardRef()`.
		This fantastic API allows the ref to be visible when creating components.

		render() {
		const items = this.state.items.map(val => (<li key={uniqueId()} data-id={val}>{val}</li>));
		Use this when third party UI libraries.

		return (
		<div>
		<Sortable
		tag="ul" // Defaults to "div"
		>
		{items}
		</Sortable>
		</div>
		);
		}
		NOTE: You may experience inconsistencies with this until we launch the proper version.

		> todo: Some third party UI components may have nested elements to create the look they're after.
		> This could be an issue and not sure how to fix.

		```tsx
		import React, { FC, useState, forwardRef } from "react";
		import { ReactSortable } from "react-sortablejs-typescript";

		interface ItemType {
		id: string;
		name: string;
		}

		ReactDOM.render(
		<App />,
		document.getElementById('container')
		);
		// This is just like a normal component, but the
		const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
		return <div ref={ref}>{props.children}</div>;
		});

		export const BasicFunction: FC = props => {
		const [state, setState] = useState<ItemType[]>([
		{ id: 1, name: "shrek" },
		{ id: 2, name: "fiona" }
		]);

		return (
		<ReactSortable tag={CustomComponent} list={state} setList={setState}>
		{state.map(item => (
		<div key={item.id}>{item.name}</div>
		))}
		</ReactSortable>
		);
		};
		```

		### Controlled Component
		A controlled component will keep DOM nodes untouched. You have to change state to re-render the component.
		## How does it work?

		```js
		import uniqueId from 'lodash/uniqueId';
		import React from 'react';
		import ReactDOM from 'react-dom';
		import Sortable from 'react-sortablejs';
		Sortable affects the DOM, adding, and removing nodes/css when it needs to in order to achieve the smooth transitions we all know an love.
		This component reverses many of it's actions of the DOM so React can handle this when the state changes.

		class App extends React.Component {
		state = {
		items: ['Apple', 'Banana', 'Cherry', 'Guava', 'Peach', 'Strawberry']
		};
		## Caveats / Gotchas

		render() {
		const items = this.state.items.map(val => (<li key={uniqueId()} data-id={val}>{val}</li>));
		### `key !== index`

		return (
		<div>
		<Sortable
		tag="ul" // Defaults to "div"
		onChange={(order, sortable, evt) => {
		this.setState({ items: order });
		}}
		>
		{items}
		</Sortable>
		</div>
		);
		}
		DO NOT use the index as a key for your list items. Sorting will not work.

		In all the examples above, I used an object with an ID. You should do the same!

		I may even enforce this into the design to eliminate errors.

		### `setState()`

		#### Problem

		`setState` takes one argument only. If we look in the type defs, it does say that it has a second argument, but it is already deprecated. ReactSortable passes three arguments to `setState`.

		If you pass the `setState` straight from a `useState` hook, it will work as expected. However, there will be a warning in the console:

		> Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument.
		> To execute a side effect after rendering, declare it in the component body with useEffect().

		It's just a warning and there's nothing to worry about. Nothing will break if you leave the messages there.

		```tsx
		import React, { FC, useState } from "react";
		import { ReactSortable } from "react-sortablejs-typescript";

		interface ItemType {
		id: string;
		name: string;
		}

		ReactDOM.render(
		<App />,
		document.getElementById('container')
		);
		export const BasicFunction: FC = props => {
		const [state, setState] = useState<ItemType[]>([{ id: "1", name: "shrek" }]);

		return (
		<ReactSortable
		list={state}
		// will cause warnings in dev mode only.
		setList={setState}
		>
		{state.map(item => (
		<div key={item.id}>{item.name}</div>
		))}
		</ReactSortable>
		);
		};
		```

		### Shared Group
		An example of using the `group` option to drag elements from one list into another.
		This is just a warning, but can be annoying when developing.

		File: shared-group.jsx
		```js
		import uniqueId from 'lodash/uniqueId';
		import React from 'react';
		import Sortable from 'react-sortablejs';
		Instead of passing `setState` in directly, be explicit in your callback:

		// Functional Component
		const SharedGroup = ({ items }) => {
		items = items.map(val => (<li key={uniqueId()} data-id={val}>{val}</li>));
		```tsx
		import React, { FC, useState } from "react";
		import { ReactSortable } from "react-sortablejs-typescript";

		return (
		<Sortable
		// See all Sortable options at https://github.com/RubaXa/Sortable#options
		options={{
		group: 'shared'
		}}
		tag="ul"
		>
		{items}
		</Sortable>
		);
		interface ItemType {
		id: string;
		name: string;
		}

		export const BasicFunction: FC = props => {
		const [state, setState] = useState<ItemType[]>([{ id: "1", name: "shrek" }]);

		return (
		// `sortable` and `store` arguments are here just to show what arguments have been passed.
		// They are not required to be used and you shouldn't really need them.
		<ReactSortable
		list={state}
		// will not cause warnings in dev mode only.
		setList={(newState, sortable, store) => setState(newState)}
		>
		{state.map(item => (
		<div key={item.id}>{item.name}</div>
		))}
		</ReactSortable>
		);
		};

		export default SharedGroup;
		```

		File: index.jsx
		```js
		import React from 'react';
		import ReactDOM from 'react-dom';
		import SharedGroup from './shared-group';
		### Nesting

		const App = (props) => {
		return (
		<div>
		<SharedGroup
		items={['Apple', 'Banaba', 'Cherry', 'Grape']}
		/>
		<br/>
		<SharedGroup
		items={['Lemon', 'Orange', 'Pear', 'Peach']}
		/>
		</div>
		);
		};
		#### Problem

		ReactDOM.render(<App />, document.getElementById('container'));
		```
		Basically the child updates the state twice. I'm working on this.

		#### What does work?

		Our usage indicates that as long as we only move items between lists that don't use the same `setState` function.

		I hope to provide an example soon.

		#### Solutions

		We don't have anything that works 100%, but here I'd like to spit ball some potential avenues to look down.

		- Use `onMove` to handle state changes instead of `onAdd`,`onRemove`, etc.
		- Create a Sortable plugin specifically for react-sortbalejs

.eslintrc

.travis.yml

babel.config.js

bower.json

dist/react-sortable.js

dist/react-sortable.min.js

docs/app.css

docs/bundle.js

docs/bundle.js.map

docs/index.html

examples/index.html

examples/index.jsx

examples/webpack.config.js

lib/index.js

lib/Sortable.js

LICENSE

src/index.js

src/Sortable.jsx

test/index.js

webpack.config.js

react-sortablejs - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes