{"repo":"bokuweb/react-rnd","free":true,"listed":false,"github":"https://github.com/bokuweb/react-rnd","clone":"git clone https://github.com/bokuweb/react-rnd.git","description":"🖱 A resizable and draggable component for React.","language":"TypeScript","stars":4321,"topics":["react","drag","resize","resizable","component","draggable"],"license":"MIT","category":"ui-components","readme_excerpt":"A resizable and draggable component for React. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage Props Instance API updateSize(size: { width: number string, height: number string }): void updatePosition({ x: number, y: number }): void Test Related Changelog License Screenshot https://codesandbox.io/s/xpm699v4lp Live Demo Storybook Storybook CodeSandbox CodeSandbox(with default) CodeSandbox(with size and position) CodeSandbox(with typescript) CodeSandbox(with hooks) Install - use npm - use yarn Usage Example with default Example with position and size Props default: { x: number; y: number; width?: number string; height?: number string; }; The width and height property is used to set the default size of the component. For example, you can set 300 , '300px' , 50% . If omitted, set 'auto' . The x and y property is used to set the default position of the component. size?: { width: (number string), height: (number string) }; The size property is used to set size of the component. For example, you can set 300, '300px', 50%. Use size if you need to control size state by yourself. position?: { x: number, y: number }; The position property is used to set position of the component. Use position if you need to control size state by yourself. see, following example. className?: string; The className property is used to set the custom className of the component. style?: { [key: string]: string }; The style property is used to set the custom style of the component. ","default_branch":null,"files":null,"tree":[],"storefront":"/r/bokuweb","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/bokuweb/react-rnd/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}