2.0.4 • Published 1 month ago
@neodrag/solid v2.0.4
Features
- 🤏 Tiny - Only 1.75KB min+brotli.
- 🐇 Simple - Quite simple to use, and effectively no-config required!
- 🧙♀️ Elegant - SolidJS directive, to keep the usage simple, elegant and straightforward.
- 🗃️ Highly customizable - Offers tons of options that you can modify to get different behavior.
- ⚛️ Reactive - Change options passed to it on the fly, it will just work 🙂
Installing
pnpm add @neodrag/solid
# npm
npm install @neodrag/solid
# yarn
yarn add @neodrag/solid
Usage
Basic usage
import { createDraggable } from '@neodrag/solid';
export const App: Component = () => {
const { draggable } = createDraggable();
return <div use:draggable>You can drag me</div>;
};
With options
import { createDraggable } from '@neodrag/solid';
const { draggable } = createDraggable();
<div use:draggable={{ axis: 'x', grid: [10, 10] }}>I am draggable</div>;
Defining options elsewhere with typescript
import { createDraggable, type DragOptions } from '@neodrag/solid';
const options: DragOptions = {
axis: 'y',
bounds: 'parent',
};
const { draggable } = createDraggable();
<div use:draggable={options}>I am draggable</div>;
Reactive options:
import { createSignal } from 'solid-js';
import { createDraggable } from '@neodrag/solid';
const [options, setOptions] = createSignal({
axis: 'y',
bounds: 'parent',
});
<div use:draggable={options()}>I am draggable</div>;
// You can update `options` with `setOptions` anytime and it'll change. Neodrag will automatically update to the new options 😉
Read the docs
Credits
Inspired from the amazing react-draggable library, and implements even more features with a similar API, but 3.7x smaller.
License
MIT License © Puru Vijay
2.0.4
1 month ago
2.0.0-next.6
1 year ago
2.0.0-next.4
1 year ago
2.0.0-next.5
1 year ago
2.0.3
1 year ago
2.0.2
1 year ago
2.0.0-next.2
1 year ago
2.0.0-next.3
1 year ago
2.0.0-next.0
1 year ago
2.0.0-next.1
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago