{"_id":"@hypnosphi/react-sizeme","_rev":"461457","name":"@hypnosphi/react-sizeme","description":"Make your React Components aware of their width and/or height!","dist-tags":{"latest":"2.6.13"},"maintainers":[{"name":"hypnosphi","email":""}],"time":{"modified":"2021-08-05T07:41:54.000Z","created":"2021-01-26T16:42:04.815Z","2.6.13":"2021-01-26T18:05:51.156Z","2.6.12":"2021-01-26T16:42:04.815Z"},"users":{},"author":{"name":"Sean Matheson","email":"sean@ctrlplusb.com"},"repository":{"type":"git","url":"https://github.com/ctrlplusb/react-sizeme.git"},"versions":{"2.6.13":{"name":"@hypnosphi/react-sizeme","publishConfig":{"access":"public"},"version":"2.6.13","description":"Make your React Components aware of their width and/or height!","license":"MIT","main":"dist/react-sizeme.js","types":"react-sizeme.d.ts","repository":{"type":"git","url":"https://github.com/ctrlplusb/react-sizeme.git"},"keywords":["library"],"homepage":"https://github.com/ctrlplusb/react-sizeme#readme","author":{"name":"Sean Matheson","email":"sean@ctrlplusb.com"},"scripts":{"build":"node ./tools/scripts/build.js","clean":"rimraf ./dist && rimraf ./coverage","lint":"eslint src","prepublish":"yarn run build","test":"jest","test:coverage":"yarn run test -- --coverage","test:coverage:deploy":"yarn run test:coverage && codecov"},"resolutions":{"@types/react":"16.9.17"},"dependencies":{"element-resize-detector":"^1.2.1","invariant":"^2.2.4","shallowequal":"^1.1.0","throttle-debounce":"^2.1.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0","react-dom":"^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/register":"^7.12.10","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","app-root-dir":"1.0.2","babel-eslint":"10.0.3","babel-jest":"^24.9.0","codecov":"^3.6.1","cross-env":"^6.0.3","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","enzyme-to-json":"^3.4.3","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","gzip-size":"^5.1.1","husky":"^4.0.10","in-publish":"2.0.0","jest":"^24.9.0","lint-staged":"^9.5.0","prettier":"^1.19.1","pretty-bytes":"5.3.0","ramda":"^0.26.1","react":"^16.12.0","react-addons-test-utils":"^15.6.0","react-dom":"^16.12.0","react-test-renderer":"^16.12.0","readline-sync":"1.4.10","rimraf":"^3.0.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-uglify":"^6.0.4","title-case":"^3.0.2","typescript":"^3.7.4","typings-tester":"^0.3.2"},"jest":{"collectCoverageFrom":["src/**/*.{js,jsx}"],"snapshotSerializers":["/node_modules/enzyme-to-json/serializer"],"testPathIgnorePatterns":["/(coverage|dist|node_modules|tools)/","/src/__tests__/typescript/"],"testURL":"http://localhost/"},"eslintConfig":{"root":true,"parser":"babel-eslint","env":{"browser":true,"es6":true,"node":true,"jest":true},"extends":["airbnb","prettier"],"rules":{"camelcase":0,"import/prefer-default-export":0,"import/no-extraneous-dependencies":0,"max-classes-per-file":0,"no-nested-ternary":0,"no-underscore-dangle":0,"react/no-array-index-key":0,"react/react-in-jsx-scope":0,"semi":[2,"never"],"react/destructuring-assignment":0,"react/forbid-prop-types":0,"react/jsx-filename-extension":0,"react/jsx-props-no-spreading":0,"react/sort-comp":0,"react/state-in-constructor":0,"react/static-property-placement":0}},"eslintIgnore":["node_modules/","dist/","coverage/"],"prettier":{"semi":false,"singleQuote":true,"trailingComma":"all"},"lint-staged":{"*.js":["prettier --write \"src/**/*.js\"","git add"]},"husky":{"hooks":{"pre-commit":"lint-staged && yarn run test"}},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016 Sean Matheson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@hypnosphi/react-sizeme@2.6.13","dist":{"shasum":"81b7bf40b27adcb48b804fb8c725f63962e9a7d9","size":44679,"noattachment":false,"key":"/@hypnosphi/react-sizeme/-/@hypnosphi/react-sizeme-2.6.13.tgz","tarball":"http://registry.cnpm.dingdandao.com/@hypnosphi/react-sizeme/download/@hypnosphi/react-sizeme-2.6.13.tgz"},"_npmUser":{"name":"hypnosphi","email":"talpa@yandex.ru"},"directories":{},"maintainers":[{"name":"hypnosphi","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-sizeme_2.6.13_1611684350935_0.34966806613764834"},"_hasShrinkwrap":false,"publish_time":1611684351156,"_cnpm_publish_time":1611684351156},"2.6.12":{"name":"@hypnosphi/react-sizeme","publishConfig":{"access":"public"},"version":"2.6.12","description":"Make your React Components aware of their width and/or height!","license":"MIT","main":"dist/react-sizeme.js","types":"react-sizeme.d.ts","repository":{"type":"git","url":"https://github.com/ctrlplusb/react-sizeme.git"},"keywords":["library"],"homepage":"https://github.com/ctrlplusb/react-sizeme#readme","author":{"name":"Sean Matheson","email":"sean@ctrlplusb.com"},"scripts":{"build":"node ./tools/scripts/build.js","clean":"rimraf ./dist && rimraf ./coverage","lint":"eslint src","prepublish":"yarn run build","test":"jest","test:coverage":"yarn run test -- --coverage","test:coverage:deploy":"yarn run test:coverage && codecov"},"resolutions":{"@types/react":"16.9.17"},"dependencies":{"element-resize-detector":"^1.2.1","invariant":"^2.2.4","shallowequal":"^1.1.0","throttle-debounce":"^2.1.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0","react-dom":"^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/register":"^7.12.10","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","app-root-dir":"1.0.2","babel-eslint":"10.0.3","babel-jest":"^24.9.0","codecov":"^3.6.1","cross-env":"^6.0.3","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","enzyme-to-json":"^3.4.3","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","gzip-size":"^5.1.1","husky":"^4.0.10","in-publish":"2.0.0","jest":"^24.9.0","lint-staged":"^9.5.0","prettier":"^1.19.1","pretty-bytes":"5.3.0","ramda":"^0.26.1","react":"^16.12.0","react-addons-test-utils":"^15.6.0","react-dom":"^16.12.0","react-test-renderer":"^16.12.0","readline-sync":"1.4.10","rimraf":"^3.0.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-uglify":"^6.0.4","title-case":"^3.0.2","typescript":"^3.7.4","typings-tester":"^0.3.2"},"jest":{"collectCoverageFrom":["src/**/*.{js,jsx}"],"snapshotSerializers":["/node_modules/enzyme-to-json/serializer"],"testPathIgnorePatterns":["/(coverage|dist|node_modules|tools)/","/src/__tests__/typescript/"],"testURL":"http://localhost/"},"eslintConfig":{"root":true,"parser":"babel-eslint","env":{"browser":true,"es6":true,"node":true,"jest":true},"extends":["airbnb","prettier"],"rules":{"camelcase":0,"import/prefer-default-export":0,"import/no-extraneous-dependencies":0,"max-classes-per-file":0,"no-nested-ternary":0,"no-underscore-dangle":0,"react/no-array-index-key":0,"react/react-in-jsx-scope":0,"semi":[2,"never"],"react/destructuring-assignment":0,"react/forbid-prop-types":0,"react/jsx-filename-extension":0,"react/jsx-props-no-spreading":0,"react/sort-comp":0,"react/state-in-constructor":0,"react/static-property-placement":0}},"eslintIgnore":["node_modules/","dist/","coverage/"],"prettier":{"semi":false,"singleQuote":true,"trailingComma":"all"},"lint-staged":{"*.js":["prettier --write \"src/**/*.js\"","git add"]},"husky":{"hooks":{"pre-commit":"lint-staged && yarn run test"}},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016 Sean Matheson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@hypnosphi/react-sizeme@2.6.12","dist":{"shasum":"761dee6506c15869f8eac6eb7b1480ebbe854df4","size":27196,"noattachment":false,"key":"/@hypnosphi/react-sizeme/-/@hypnosphi/react-sizeme-2.6.12.tgz","tarball":"http://registry.cnpm.dingdandao.com/@hypnosphi/react-sizeme/download/@hypnosphi/react-sizeme-2.6.12.tgz"},"_npmUser":{"name":"hypnosphi","email":"talpa@yandex.ru"},"directories":{},"maintainers":[{"name":"hypnosphi","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-sizeme_2.6.12_1611679324596_0.27277093146888043"},"_hasShrinkwrap":false,"publish_time":1611679324815,"_cnpm_publish_time":1611679324815}},"readme":"

 

\n\n

\n \n

Make your React Components aware of their width and/or height!

\n

\n\n

 

\n\n[![npm](https://img.shields.io/npm/v/react-sizeme.svg?style=flat-square)](http://npm.im/react-sizeme)\n[![MIT License](https://img.shields.io/npm/l/react-sizeme.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n[![Travis](https://img.shields.io/travis/ctrlplusb/react-sizeme.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/react-sizeme)\n[![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/react-sizeme.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/react-sizeme)\n\n- Blazingly fast. ????\n- Responsive Components!\n- Easy to use.\n- Extensive browser support.\n- Supports any Component type, i.e. stateless/class.\n- Really small bundle size.\n\nUse it via the render prop pattern (supports `children` or `render` prop):\n\n```javascript\nimport { SizeMe } from 'react-sizeme'\n\nfunction MyApp() {\n return {({ size }) =>
My width is {size.width}px
}\n}\n```\n\nOr, via a higher order component:\n\n```javascript\nimport { withSize } from 'react-sizeme'\n\nfunction MyComponent({ size }) {\n return
My width is {size.width}px
\n}\n\nexport default withSize()(MyComponent)\n```\n\n

 

\n\n---\n\n## TOCs\n\n- [Intro](https://github.com/ctrlplusb/react-sizeme#intro)\n- [Installation](https://github.com/ctrlplusb/react-sizeme#installation)\n- [Configuration](https://github.com/ctrlplusb/react-sizeme#configuration)\n- [Component Usage](https://github.com/ctrlplusb/react-sizeme#component-usage)\n- [HOC Usage](https://github.com/ctrlplusb/react-sizeme#hoc-usage)\n - [`onSize` callback alternative usage](https://github.com/ctrlplusb/react-sizeme#onsize-callback-alternative-usage)\n- [Under the hood](https://github.com/ctrlplusb/react-sizeme#under-the-hood)\n- [Examples](#examples)\n - [Loading different child components based on size](#loading-different-child-components-based-on-size)\n- [Server Side Rendering](https://github.com/ctrlplusb/react-sizeme#server-side-rendering)\n- [Extreme Appreciation](https://github.com/ctrlplusb/react-sizeme#extreme-appreciation)\n- [Backers](https://github.com/ctrlplusb/react-sizeme#backers)\n\n

 

\n\n---\n\n## Intro\n\nGive your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered.\n\nCheck out a working demo here: https://react-sizeme.now.sh\n\n

 

\n\n---\n\n## Installation\n\n```javascript\nnpm install react-sizeme\n```\n\n

 

\n\n---\n\n## Configuration\n\nThe following configuration options are available. Please see the usage docs for how to pass these configuration values into either the [component](#component-usage) or [higher order function](#hoc-usage).\n\n- `monitorWidth` (_boolean_, **default**: true)\n\n If true, then any changes to your Components rendered width will cause an recalculation of the \"size\" prop which will then be be passed into your Component.\n\n- `monitorHeight` (_boolean_, **default**: false)\n\n If true, then any changes to your Components rendered height will cause an\n recalculation of the \"size\" prop which will then be be passed into\n your Component.\n\n > PLEASE NOTE: that this is set to `false` by default\n\n- `refreshRate` (_number_, **default**: 16)\n\n The maximum frequency, in milliseconds, at which size changes should be recalculated when changes in your Component's rendered size are being detected. This should not be set to lower than 16.\n\n- `refreshMode` (_string_, **default**: 'throttle')\n\n The mode in which refreshing should occur. Valid values are \"debounce\" and \"throttle\".\n\n \"throttle\" will eagerly measure your component and then wait for the refreshRate to pass before doing a new measurement on size changes.\n\n \"debounce\" will wait for a minimum of the refreshRate before it does a measurement check on your component.\n\n \"debounce\" can be useful in cases where your component is animated into the DOM.\n\n > NOTE: When using \"debounce\" mode you may want to consider disabling the placeholder as this adds an extra delay in the rendering time of your component.\n\n- `noPlaceholder` (_boolean_, **default**: false)\n\n By default we render a \"placeholder\" component initially so we can try and \"prefetch\" the expected size for your component. This is to avoid any unnecessary deep tree renders. If you feel this is not an issue for your component case and you would like to get an eager render of\n your component then disable the placeholder using this config option.\n\n > NOTE: You can set this globally. See the docs on first render.\n\n

 

\n\n---\n\n## Component Usage\n\nWe provide a \"render props pattern\" based component. You can import it like so:\n\n```javascript\nimport { SizeMe } from 'react-sizeme'\n```\n\nYou then provide it either a `render` or `children` prop containing a function/component that will receive a `size` prop (an object with `width` and `height` properties):\n\n```javascript\n{({ size }) =>
My width is {size.width}px
}\n```\n\n_or_\n\n```javascript\n
My width is {size.width}px
} />\n```\n\nTo provide [configuration](#configuration) you simply add any customisation as props. For example:\n\n```javascript\n
My width is {size.width}px
}\n/>\n```\n\n

 

\n\n---\n\n## HOC Usage\n\nWe provide you with a higher order component function called `withSize`. You can import it like so:\n\n```javascript\nimport { withSize } from 'react-sizeme'\n```\n\nFirstly, you have to call the `withSize` function, passing in an optional [configuration](#configuration) object should you wish to customise the behaviour:\n\n```javascript\nconst withSizeHOC = withSize()\n```\n\nYou can then use the returned Higher Order Component to decorate any of your existing Components with the size awareness ability:\n\n```javascript\nconst SizeAwareComponent = withSizeHOC(MyComponent)\n```\n\nYour component will then receive a `size` prop (an object with `width` and `height` properties).\n\n> Note that the values could be undefined based on the configuration you provided (e.g. you explicitly do not monitor either of the dimensions)\n\nBelow is a full example:\n\n```javascript\nimport sizeMe from 'react-sizeme'\n\nclass MyComponent extends Component {\n render() {\n const { width, height } = this.props.size\n\n return (\n
\n My size is {width || -1}px x {height || -1}px\n
\n )\n }\n}\n\nexport default sizeMe({ monitorHeight: true })(MyComponent)\n```\n\n### `onSize` callback alternative usage\n\nThe higher order component also allows an alternative usage where you provide an `onSize` callback function.\n\nThis allows the \"parent\" to manage the `size` value rather than your component, which can be useful in specific circumstances.\n\nBelow is an example of it's usage.\n\nFirstly, create a component you wish to know the size of:\n\n```jsx\nimport sizeMe from 'react-sizeme'\n\nfunction MyComponent({ message }) {\n return
{message}
\n}\n\nexport default sizeMe()(MyComponent)\n```\n\nNow create a \"parent\" component providing it a `onSize` callback function to the size aware component:\n\n```jsx\nclass ParentComponent extends React.Component {\n onSize = size => {\n console.log('MyComponent has a width of', size.width)\n }\n\n render() {\n return \n }\n}\n```\n\n

 

\n\n---\n\n## Under the hood\n\nIt can be useful to understand the rendering workflow should you wish to debug any issues we may be having.\n\nIn order to size your component we have a bit of a chicken/egg scenario. We can't know the width/height of your Component until it is rendered. This can lead wasteful rendering cycles should you choose to render your components based on their width/height.\n\nTherefore for the first render of your component we actually render a lightweight placeholder in place of your component in order to obtain the width/height. If your component was being passed a `className` or `style` prop then these will be applied to the placeholder so that it can more closely resemble your actual components dimensions.\n\nSo the first dimensions that are passed to your component may not be \"correct\" dimensions, however, it should quickly receive the \"correct\" dimensions upon render.\n\nShould you wish to avoid the render of a placeholder and have an eager render of your component then you can use the `noPlaceholder` configuration option. Using this configuration value your component will be rendered directly, however, the `size` prop may contain `undefined` for width and height until your component completes its first render.\n\n

 

\n\n---\n\n## Examples\n\n### Loading different child components based on size\n\n```javascript\nimport React from 'react';\nimport LargeChildComponent from './LargeChildComponent';\nimport SmallChildComponent from './SmallChildComponent';\nimport sizeMe from 'react-sizeme';\n\nfunction MyComponent(props) {\n const { width, height } = props.size;\n\n const ToRenderChild = height > 600\n ? LargeChildComponent\n : SmallChildComponent;\n\n return (\n
\n

My size is {width}x{height}

\n \n \n );\n}\n\nexport default sizeMe({ monitorHeight: true })(MyComponent);\n```\n\n> EXTRA POINTS! Combine the above with a code splitting API (e.g. Webpack's System.import) to avoid unnecessary code downloads for your clients. Zing!\n\n

 

\n\n---\n\n## Server Side Rendering\n\nOkay, I am gonna be up front here and tell you that using this library in an SSR context is most likely a bad idea. If you insist on doing so you then you should take the time to make yourself fully aware of any possible repercussions you application may face.\n\nA standard `sizeMe` configuration involves the rendering of a placeholder component. After the placeholder is mounted to the DOM we extract it's dimension information and pass it on to your actual component. We do this in order to avoid any unnecessary render cycles for possibly deep component trees. Whilst this is useful for a purely client side set up, this is less than useful for an SSR context as the delivered page will contain empty placeholders. Ideally you want actual content to be delivered so that users without JS can still have an experience, or SEO bots can scrape your website.\n\nTo avoid the rendering of placeholders in this context you can make use of the `noPlaceholders` global configuration value. Setting this flag will disables any placeholder rendering. Instead your wrapped component will be rendered directly - however it's initial render will contain no values within the `size` prop (i.e. `width`, `height`, and `position` will be `null`).\n\n```javascript\nimport sizeMe from 'react-sizeme'\n\n// This is a global variable. i.e. will be the default for all instances.\nsizeMe.noPlaceholders = true\n```\n\n> Note: if you only partialy server render your application you may want to use the component level configuration that allows disabling placeholders per component (e.g. `sizeMe({ noPlaceholder: true })`)\n\nIt is up to you to decide how you would like to initially render your component then. When your component is sent to the client and mounted to the DOM `SizeMe` will calculate and send the dimensions to your component as normal. I suggest you tread very carefully with how you use this updated information and do lots of testing using various screen dimensions. Try your best to avoid unnecessary re-rendering of your components, for the sake of your users.\n\nIf you come up with any clever strategies for this please do come share them with us! :)\n\n

 

\n\n---\n\n## Extreme Appreciation!\n\nWe make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkle-heart:\n\n

 

\n\n---\n\n## Backers\n\nThank goes to all our backers! [[Become a backer](https://opencollective.com/controlplusb#backer)].\n\n\n \n\n","_attachments":{},"homepage":"https://github.com/ctrlplusb/react-sizeme#readme","license":"MIT"}