react-resizer icon indicating copy to clipboard operation
react-resizer copied to clipboard

Unable to use React-Resizer

Open cpandit201 opened this issue 5 years ago • 1 comments

I am trying to import react resizer in my project

Can you please provide an example/demo with React v16 Classes / ES6

Issueimporting the Resizer Component gives me an error

Tried to perform on stackblitz giving me same error, Live Code Demo : https://stackblitz.com/edit/react-resizer-issue

Code

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Resizer } from 'react-resizer'
// let Resizer = require('react-resizer');

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }
 
  _handleResize = (diff) => {
    return console.log('resizing');
  }
  
  _handleResizeStart = () => {
    return console.log('resize start');
  }
  
  _handleResizeEnd = () => {
    return console.log('resize end');
  }

  render() {
    return (
      <div>
          <Resizer  
          onResizeStart={() => this._handleResizeStart()}
          onResize={() => this._handleResize()}
          onResizeEnd={() => this._handleResizeEnd()}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Unexpected token '<'

image

cpandit201 avatar Jul 31 '20 12:07 cpandit201

You need to change the file extension to use react (from js -> jsx)

an5rag avatar Sep 30 '20 00:09 an5rag