A simple component for making elements draggable.

Related tags

React react component reactjs draggable
Overview

React Draggable Component

A simple component for making elements draggable.

Demo

stackblitz

Installation

$ npm install drag-react
# yarn add drag-react

Example

import { Draggable } from 'drag-react';

<Draggable>
  <div>My element is draggable now</div>
</Draggable>

Props

name type default description
children any empty Component or HTMLElement
className string 'drag-react' class name
style Object { position: 'fixed', left: '10px', top: '10px', zIndex: 99999 , cursor: 'move' } css style

License

MIT

You might also like...

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Jan 4, 2023

The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jan 3, 2023

:hourglass_flowing_sand: A higher order component for loading components with promises.

:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jan 3, 2023

A Higher Order Component using react-redux to keep form state in a Redux store

A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Jan 3, 2023

⚪ SVG-Powered component to easily create skeleton loadings.

⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Jan 4, 2023

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Jan 5, 2023

Markdown component for React

react-markdown Markdown component for React using remark. Learn markdown here and check out the demo here. Install npm: npm install react-markdown Why

Jan 4, 2023

A React Component library implementing the Base design language

A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Dec 29, 2022

Accessible modal dialog component for React

react-modal Accessible modal dialog component for React.JS Table of Contents Installation API documentation Examples Demos Installation To install, yo

Jan 1, 2023
Comments
Owner
Haikel Fazzani
💻Don't stop learning☀️.
Haikel Fazzani
GitHub https://haikelfazzani.github.io/drag-react/
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo

RGL 16.9k Jan 4, 2023
Makes the HTML element dialog draggable

Makes the HTML element dialog draggable

Naeemo 2 Sep 9, 2022
A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere

@yomo/react-cursor-chat ?? Introduction A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real

YoMo 84 Nov 17, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
PWA for making ad hoc room reservations easy in Google Workspace environment.

Get A Room! More images in directory documentation/ui-and-architecture-images! Project structure The project is divided into frontend and backend fold

null 4 Sep 14, 2022
An extremely helpful React Hook to trap the focusable elements / Hello Modals! Hello a11y!

react-use-focus-trap Everytime when people implement Modals... ...People forget that pro users as well as users that are permanently or temporarily re

David Lorenz 18 Nov 30, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
A simple and responsive quizlet-like flashcard component with a few additional options

Welcome to react-quizlet-flashcard ?? A simple and responsive quizlet-like flashcard component with a few additional options. Front and back card acce

A.B.Santhosh 14 Dec 17, 2022
This simple and small react component can check your repository stars and change theme on light/dark

Repository metrics for react This beauty and easy (4KB) react component can help you add metrics to your repositories also you can change component th

Koma Human 2 Jun 25, 2022
Simple React Native marquee component,fully implemented using reanimated v2,support to iOS/Android/Web.

@react-native-reanimated-community/react-native-reanimated-marquee Simple React Native marquee component,fully implemented using reanimated v2,support

react-native-reanimated-community 6 Sep 25, 2022