{"_id":"@dahaca/re-siz-able","_rev":"3-3e2352c3c917099b5c005651f08a3514","name":"@dahaca/re-siz-able","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@dahaca/re-siz-able","version":"1.0.0","description":"Re-siz-able is a React library that gives your components an ability to become resizable.","main":"index.js","repository":{"type":"git","url":"https://github.com/dahaca/Re-siz-able"},"author":{"name":"Leonid Grichshenin","email":"dahaca17@gmail.com"},"license":"MIT","private":false,"dependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-scripts":"3.0.1","styled-components":"^4.2.0"},"_id":"@dahaca/re-siz-able@1.0.0","dist":{"shasum":"dcda7fc81a0dbc2203fa5f755a900dee25ea8ec3","integrity":"sha512-qmwq0UIvjYj5nYl//CUTOl89KIxADXkjauRYF6B3hLc+Ly8Rt2rruC64A+El/xYbAKQ+NpVHFbUtt6HAiseYgg==","tarball":"https://registry.npmjs.org/@dahaca/re-siz-able/-/re-siz-able-1.0.0.tgz","fileCount":9,"unpackedSize":9349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EqGCRA9TVsSAnZWagAACuwP/1m20d0BBRmCplzryzJi\njx5mohnTXn0fGJdQurOaQVnB92Of1gYAf02Ws8tb7NsduQpsADx21/7FiPI9\nPmwttyj7Zr0ZMNNGsMQxKvaFFHQm1D5djO5/81OW6IYX3QXo2Y5OV0OYTL5P\n30KcytGmhaEFZ0GAwHRYnnLDk6I9n2BSbycnuyWdkGhZCfOtJDyQVxbb2Fa4\naus++wh0FzVz8H8KgUewGDj6oT5KinEckV+bnnMNoJbz5tDNhcuZ+vRjJQXx\nuIbyMpITCEjtXH8BsKlIFDhLslzRT8wTGTVRVHH7BAx1WnGbUFNcbqV2p7i4\nSoem8P3XnMm7erclRScle1jOIaC4wDYXxHSwGS73JY4ZaWQLtCawUK7ERnlG\nn8ScfvCHSkUNVEIUkjY1dUm7SYyFw/LQhvfxvJU7eD7LWu/MNag+OSY+cyBo\nkUMiRAiu3/HdvmxNUXoMVfyVlsIAVB3G4163ybCH8XmnRQXu/gUvBK0pZsaA\nMTUWfZt55GkoblvUKFVWE3J7t3tP9YwU5E2Q8SYIsay4XikpHBrSsyLoVdmB\nmv94a+xSmr0mmK2Xu93rU+Ir+S/tWPEIDSy2IYtIiyNohWKTecHBqXwle0SX\nS0q5xuGS2eQ+/YwDqVRmTWRmo01GNATtFzaSdK13syObvlJpZpV5B3PWebrl\nJBm2\r\n=t5s0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEd2SAt5IFFRBSmrOTwdvP9ATMdGig95XhhLMv/kOQfhAiAg3pmwJgX3DGcm/64YoBcpLJjJmecyG39TMOL1ck30wg=="}]},"maintainers":[{"name":"dahaca","email":"dahaca17@gmail.com"}],"_npmUser":{"name":"dahaca","email":"dahaca17@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/re-siz-able_1.0.0_1559775877550_0.1625906040572873"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dahaca/re-siz-able","version":"1.0.1","description":"Re-siz-able is a React library that gives your components an ability to become resizable.","main":"index.js","repository":{"type":"git","url":"https://github.com/dahaca/Re-siz-able"},"author":{"name":"Leonid Grichshenin","email":"dahaca17@gmail.com"},"license":"MIT","private":false,"keywords":["react","resize","resizable"],"dependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-scripts":"3.0.1","styled-components":"^4.2.0"},"_id":"@dahaca/re-siz-able@1.0.1","dist":{"shasum":"66871c13b84b0d85a2e2cd7570bb859a6b56f26d","integrity":"sha512-pGP+5900jkXxjAdxAbDUwZQHP4C3nfxivvj8jfH83elINJqbK9TK2V3kQ/g+2bgtLSAAP9datHd1G3L2IrkZ2w==","tarball":"https://registry.npmjs.org/@dahaca/re-siz-able/-/re-siz-able-1.0.1.tgz","fileCount":10,"unpackedSize":14634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EsACRA9TVsSAnZWagAAolcP+QHbadTvVUeuuUPLxi8m\n3SUQ55t3cLvfe+aGGgtKXvpyO3PVWiRefEIBpnGnsVftLqLRcR23/m1nKo6F\nSQvRxSUIrlKs48dDTXYl6XpeGK4hbFILrrqeSt7g+SFj3gnAlIxfr728jeuQ\nEses/GhDC+qmsqC2P8xPI2yOaDwgU+gIxkAHYUDXuv3frcojYGl6dcD+Psze\nRz5SgTuWOJ82AU1kwYQiMj8OrzJj0gCAALY/4kReRCc41P8Harq41YyXxPLG\n2CpdWQr/v9eYPl2EbhWWeX6FnA2MfTc8Jj1OzktxYEUiPD94NUheciv+FLGX\no9j+Edi/8ZDO9B9OYR8ilhnCBJ6zuHX0HGyy+3unFT35rvOFKhQIfZSqmsbO\nA76Wr4c3MVRa4hgFK3Hn0bkt3VBWOZcJFdqBwcT4AxxdK3EFkTxIu188HjF0\nArze4lDl3LTu0iuUofM0To8dsEmmb/an6i2A0sgrvBtBab0jtP2HoF8HlM4Y\nEUekoVL3n5im+AMkSRy+ipCtg2Km8Lzx7vKo93Tspgq9HrCPoNDKscmUYldD\no5tSgFbKSCUeyX1R8qQBIjocxxEUY4wTaoScOIQfBib3UFEhaDgAtsi3eZGS\nl23cvG5cWk6fQgL3uxJVAW5iEJ3WXnFaQG+F4HghXYW8IRGKWdY9o4U9kM0i\nP6zu\r\n=3zM0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEpcULIFmIJx/NA/jHJO8nHsGc/oUID1oOWR5uETp4qAiEAw5UhlnKC8gDPNDF6QtWbLJnOwz3V9M8wU8Pxf8IscIQ="}]},"maintainers":[{"name":"dahaca","email":"dahaca17@gmail.com"}],"_npmUser":{"name":"dahaca","email":"dahaca17@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/re-siz-able_1.0.1_1559775999281_0.8164416592154422"},"_hasShrinkwrap":false},"1.0.2":{"name":"@dahaca/re-siz-able","version":"1.0.2","description":"Re-siz-able is a React library that gives your components an ability to become resizable.","main":"index.js","repository":{"type":"git","url":"https://github.com/dahaca/Re-siz-able"},"author":{"name":"Leonid Grichshenin","email":"dahaca17@gmail.com"},"license":"MIT","private":false,"keywords":["react","resize","resizable"],"dependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-scripts":"3.0.1","styled-components":"^4.2.0"},"_id":"@dahaca/re-siz-able@1.0.2","dist":{"shasum":"56fd2d093cb8caf1c70f15f591c52be707023090","integrity":"sha512-FiwRrvxQkScAGVzN6lsClvbDKFTQfcSS9tX+5nN023jIobuke7A6599gCbz/y5/rwBKSnPvHfuBj/WnQ9vCWhw==","tarball":"https://registry.npmjs.org/@dahaca/re-siz-able/-/re-siz-able-1.0.2.tgz","fileCount":10,"unpackedSize":14573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+Es2CRA9TVsSAnZWagAA1CAP/iEmIbAUay4UcCwLjAmg\nreCzxF/0Z12DzJt81hm8cNuqL6zZ4XGTokRGx8ir8g5+zML0XzlzHqNZxkdi\n+rKs49LHJ62GGU1xvuW6KUP4xjD0gZ8VH77sRp2mfyJMW3hZBp5YArfak9my\nulUE0NiwKqf4UxF7+NLYDpnjuvMzXDbDtV/d+OK6DWypSWYK9uRidlXy5psB\n9GWkjEo6qg+ZcddJKCQv4W4SqtNNCPAECD+cnla4FOIqxtX0CZmk5AiSQO0Z\n+Qh4Ntnu95TqIGeebu5G6iyWFPHLv+kq0nnHWVyRpn57DOlNPM/RyKHV4aGY\n9V8zmAUHZLbQMdpOY/ALpuS8N/geteja+4zUq3uHWMpicbzVgOQtyKWKjtTQ\nZGwxqB+Ra7+EMM5W1XUwoaG7n/pkes+BplAfKB8t4eULj8uCBkZD2q6wrdcP\nuSuoHZGe1z+M1n0yKzLLHM0l9BOY9eIffqnb0OHCaguLvDtcF1PzzY4t0hlx\nSfZuiqm7/T5PDqpciCOinY6k0gG1+GZ0UeuUtM3s3ioS0d7a+/nWN+aYiL3p\n5VICKI80ArmjJj+dPdaUkz3ZKuFEaHdfUOXpnhEbLHHCKfcVfM52oSswx5Xp\n6iSsW34G1mX9J2syfUXsL71b4MEaLodt1PgTCEO0RhivigECnz+mTwXDs4Lk\nv6kY\r\n=4xcC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ5qkADJ0Ptf7DEki2JsxQ3wIMwsex+hVROox8SIjkDgIhAJqZmZ45OIf6wmUPIbQohG+XYJ9TRpeLyX1sDYTGdaxa"}]},"maintainers":[{"name":"dahaca","email":"dahaca17@gmail.com"}],"_npmUser":{"name":"dahaca","email":"dahaca17@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/re-siz-able_1.0.2_1559776054091_0.30635145564430855"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-05T23:04:37.508Z","1.0.0":"2019-06-05T23:04:37.725Z","modified":"2022-04-05T02:33:32.502Z","1.0.1":"2019-06-05T23:06:39.386Z","1.0.2":"2019-06-05T23:07:34.217Z"},"maintainers":[{"name":"dahaca","email":"dahaca17@gmail.com"}],"description":"Re-siz-able is a React library that gives your components an ability to become resizable.","repository":{"type":"git","url":"https://github.com/dahaca/Re-siz-able"},"author":{"name":"Leonid Grichshenin","email":"dahaca17@gmail.com"},"license":"MIT","readme":"# Re-siz-able\n\nFirst things first, the [**demo**](http://resizable-demo.surge.sh).\n\n## What is it?\n\nRe-siz-able is a React library that gives your components an ability to become resizable.\n\n## How?\n\nWhen you wrap your components with the `<Resizer/>` component, handles appear. Drag them to change the dimensions of your component.\n\n```\n<Resizer >\n  <Square />\n</Resizer>\n```\n\n![Demo gif](/demo.gif)\n\n## Just like that? 😳\n\nThere is actually more to it. There are two main ways of using **Re-siz-able**.\n\n## Usage\n\n### `<Resizer/>`\n\nYou are able to wrap an HTML element with `<Resizer/>` and it will work right away, no setup needed. You can pass props to configure its behavior. **It must receive only one child.** There is no limit for the wrapped component's children.\n\n#### You can configure `<Resizer/>` using the following props:\n\n**`handles`** – an array of names of handles to render; the default is `['left', 'right']`. The possible values are: `right`, `left`, `top`, `bottom`, `top-left`, `top-right`, `bottom-right`, `bottom-left`. An array with at least one handle name must be supplied to enable the functionality – no empty arrays.\n\n**`minWidth`** – the minimum width of the wrapped component in pixels; the default is `100`.\n\n**`maxWidth`** – the maximum width of the wrapped component in pixels; the default is `1000`.\n\n**`minHeight`** – the minimum height of the wrapped component in pixels; the default is `100`.\n\n**`maxHeight`** – the maximum height of the wrapped component in pixels; the default is `1000`.\n\n**`hideHandles`** – If `true` the handles become transparent; the default is `false`.\n\n**`preserveRatio`** – If `true` the dimension ratio of the wrapped component is preserved when resizing; the default is `false`. Works only with bi-directional handles.\n\n**`customHandle`** – A custom handle component can be supplied. It will receive the `position` and `hideHandles` props. `position` has the same values as `handles`, `hideHandles` is boolean. You can take a look at an example in the `/components` folder.\n\n**`className`** – A class name to customize the style of the wrapper inside `<Resizer/>`.\n\n### `useResizer` hook\n\nThe `useResizer` hook can be used inside a React component to provide tools, required for enabling the functionality of being resizable. It is also used internally by the `Resizer` component.\n\n#### The hook returns:\n\n**`elementRef`** – a React ref that can be passed to an element whose dimensions you want to be able to modify. It should be supplied **only** if the element has either `width` or `height` defined. Can be used together with the `defaultWidth` or `defaultHeight` hook config options. However, if both of them are present in the config, there is no need for the `elementRef`. The config options have higher precedence.\n\n**`width`** – the current width of the component in pixels. The initial value is defined by either the `defaultWidth` config option if it is present or the component's style. Must be passed to an element's inline style.\n\n**`height`** – the current height of the component in pixels. The initial value is defined by either the `defaultHeight` config option if it is present or the component's style. Must be passed to an element's inline style.\n\n**`handleMouseDown()`** – the function that must be passed to an element, which should serve as a handle, and triggered `onMouseDown`. The function accepts a handle name as the parameter. The acceptable handle names are listed above. After receiving the function, an element behaves according to the passed handle name, changing the `width` and `height` variables returned by the hook.\n\n#### The hook accepts a config object with the following optional properties:\n\n**`minWidth`** – the minimum width in pixels; the default is `100`.\n\n**`maxWidth`** – the maximum width in pixels; the default is `1000`.\n\n**`minHeight`** – the minimum height in pixels; the default is `100`.\n\n**`maxHeight`** – the maximum height in pixels; the default is `1000`.\n\n**`preserveRatio`** – If `true` the dimension ratio of the wrapped component is preserved when resizing; the default is `false`. Works only with bi-directional handles.\n\n**`defaultWidth`** – the default element width in pixels; the default is `undefined`. Must be passed if the element has no defined with.\n\n**`defaultHeight`** – the default height width in pixels; the default is `undefined`. Must be passed if the element has no defined height.\n\nThe hook opens many creative possibilities! You can use the received `width` and `height` for anything you want. You can use their values to adjust the font size when resizing a component or change its color! The freedom is yours. 🙌\n\n🛑 **Be careful:** for both the `Resizer` component and the `useResizer` hook the child or the element the hook is used in have to have defined `width` and `height` to avoid unexpected results. It can be done either via a stylesheet or the`defaultWidth` and `defaultHeight` config options in the case of the hook. Nothing would crash if the dimensions are not defined but you might experience unwanted behavior.\n\n---\n\nMade by Leonid Grishchenin\n","readmeFilename":"README.md","keywords":["react","resize","resizable"]}