@formant/ava-react/esm/demo/ResizableSquare.js

React components of AVA.

import React from 'react';
import styled from 'styled-components';

// Define interface for custom props if you want to allow external size control.

// Styled component for the resizable square.
var ResizableSquare = styled.div.withConfig({
  displayName: "ResizableSquare",
  componentId: "ava-react-d63f__sc-1ws4cd8-0"
})(["width:", ";height:", ";background-color:#e0e0e0;border:2px dashed #333;resize:both;overflow:auto;min-width:50px;min-height:50px;"], function (props) {
  return props.width || '200px';
}, function (props) {
  return props.height || '200px';
});

// React component that renders the resizable square.
var ResizableSquareComponent = function ResizableSquareComponent(_ref) {
  var width = _ref.width,
    height = _ref.height,
    children = _ref.children;
  return /*#__PURE__*/React.createElement(ResizableSquare, {
    width: width,
    height: height
  }, children);
};
export default ResizableSquareComponent;