https://github.com/lukehansell/react-interactjs

React wrapper for interact.js
https://github.com/lukehansell/react-interactjs

Last synced: about 1 month ago
JSON representation

React wrapper for interact.js

• Host: GitHub
• URL: https://github.com/lukehansell/react-interactjs
• Owner: lukehansell
• Created: 2016-05-06T09:36:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-05-10T09:46:33.000Z (over 8 years ago)
• Last Synced: 2024-11-10T09:46:47.808Z (about 2 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 27
• Watchers: 1
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-interactablejs

[View the demo](http://react-interactjs.surge.sh/)

## Props

- _draggable_ (Bool) - is the child object supposed to be draggable?

- _draggableOptions_ (Object) - options to pass to the draggable method

- _resizable_ (Bool) - is the child object supposed to be resizable?

- _resizableOptions_ (Object) - options to pass to the resizable method

## Example

```

import React from 'react'

import { render } from 'react-dom'

import Interactive from 'react-interactjs'

const draggableOptions = {

     onmove: event => {

        const target = event.target

      // keep the dragged position in the data-x/data-y attributes

      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx

      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

      // translate the element

      target.style.webkitTransform =

      target.style.transform =

        'translate(' + x + 'px, ' + y + 'px)'

      // update the posiion attributes

      target.setAttribute('data-x', x);

      target.setAttribute('data-y', y);

    }

}

const example = (

    

        

    

)

render(example, document.getElementById('container'));

```