{"bugs":{"url":"https://github.com/nkbt/react-collapse/issues"},"dist":{"shasum":"c71d95d427f4db336336dc9bcb74e94172cfc16a","tarball":"https://registry.npmjs.org/react-collapse/-/react-collapse-5.0.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-h3u5YN7XzgePCIKpJMt7V+PbIHuqh6Y/acx35bUG7MyXm0IVsl55XSb0IBK04hYry4J0FTk1MQK8djR1KWbR5w==","signatures":[{"sig":"MEYCIQC0qX83mJrxt/vkYyO7MbU5lEG3+3PRXGkSFiuEjGQSGwIhAMiS3+siHwy86B2RKcSHG5cwcWUMPnH5FcQIeeSMPpVK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31540},"main":"lib/index.js","name":"react-collapse","files":["build","lib","src","LICENSE","package.json","README.md"],"author":{"name":"Nik Butenko","email":"nik@butenko.me"},"config":{"include":["https://unpkg.com/react/umd/react.production.min.js","https://unpkg.com/react-dom/umd/react-dom.production.min.js"],"component":"ReactCollapse","externals":{"react":"React","react-dom":"ReactDOM"}},"readme":"# react-collapse [![npm](https://img.shields.io/npm/v/react-collapse.svg?style=flat-square)](https://www.npmjs.com/package/react-collapse)\n\n[![Gitter](https://img.shields.io/gitter/room/nkbt/help.svg?style=flat-square)](https://gitter.im/nkbt/help)\n\n[![CircleCI](https://img.shields.io/circleci/project/nkbt/react-collapse.svg?style=flat-square&label=nix-build)](https://circleci.com/gh/nkbt/react-collapse)\n[![Dependencies](https://img.shields.io/david/nkbt/react-collapse.svg?style=flat-square)](https://david-dm.org/nkbt/react-collapse)\n[![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-collapse.svg?style=flat-square)](https://david-dm.org/nkbt/react-collapse#info=devDependencies)\n\nComponent-wrapper for collapse animation for elements with variable (and dynamic) height\n\n\n![React Collapse](example/react-collapse.gif)\n\n\n## Installation\n\n### NPM\n\n```sh\nnpm install --save react-collapse\n```\n\n### 1998 Script Tag:\n```html\n<script src=\"https://unpkg.com/react/umd/react.production.min.js\"></script>\n<script src=\"https://unpkg.com/react-collapse/build/react-collapse.min.js\"></script>\n(Module exposed as `ReactCollapse`)\n```\n\n\n## Demo\n\n[http://nkbt.github.io/react-collapse](http://nkbt.github.io/react-collapse)\n\n## Codepen demo\n\n[http://codepen.io/nkbt/pen/MarzEg](http://codepen.io/nkbt/pen/MarzEg?editors=101)\n\n## Usage\n\nDefault behaviour, never unmounts content\n\n```js\nimport {Collapse} from 'react-collapse';\n\n// ...\n<Collapse isOpened={true || false}>\n  <div>Random content</div>\n</Collapse>\n```\n\nIf you want to unmount collapsed content, use `Unmount` component provided as:\n\n```js\nimport {UnmountClosed} from 'react-collapse';\n\n// ...\n<UnmountClosed isOpened={true || false}>\n  <div>Random content</div>\n</UnmountClosed>\n```\n\n## Options\n\n\n#### `isOpened`: PropTypes.boolean.isRequired\n\nExpands or collapses content.\n\n\n#### `children`: PropTypes.node.isRequired\n\nOne or multiple children with static, variable or dynamic height.\n\n```js\n<Collapse isOpened={true}>\n  <p>Paragraph of text</p>\n  <p>Another paragraph is also OK</p>\n  <p>Images and any other content are ok too</p>\n  <img src=\"nyancat.gif\" />\n</Collapse>\n```\n\n\n#### `hasNestedCollapse`: PropTypes.bool (default: false)\n\nIf Collapse component has more Collapse components inside, it needs `hasNestedCollapse` to be set \nto avoid delayed animations. See https://github.com/nkbt/react-collapse/issues/76 for tech details.\n\n```js\n<Collapse isOpened={true} hasNestedCollapse={true}>\n  <Collapse isOpened={true}>\n    <div>Nested collapse</div>\n  </Collapse>\n  <Collapse isOpened={true}>\n    <div>Nested collapse</div>\n  </Collapse>\n</Collapse>\n```\n\n\n#### `fixedHeight`: PropTypes.number\n\nIf content's height is known ahead it is possible pass optional `fixedHeight` prop with number of pixels.\n\n```js\n<Collapse isOpened={true} fixedHeight={100}>\n  <div>Animated container will always expand to 100px height</div>\n</Collapse>\n```\n\n\n#### `springConfig`: PropTypes.objectOf(PropTypes.number)\n\nCustom config `{stiffness, damping, precision}` passed to the spring function (see https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig)\n\n```js\nimport {presets} from 'react-motion';\n\n<Collapse isOpened={true} springConfig={presets.wobbly}>\n  <div>Wobbly animated container</div>\n</Collapse>\n```\n\n```js\n<Collapse isOpened={true} springConfig={{stiffness: 100, damping: 20}}>\n  <div>Customly animated container</div>\n</Collapse>\n```\n\n#### `forceInitialAnimation`: PropTypes.boolean\n\nWhen initially opened, by default collapse content will be opened without animation, instantly. With this option set to `true` you can enforce initial rendering to be smoothly expanded from 0.\nIt is used internally in `Unmount` component implementation.\n\n\n#### `theme`: PropTypes.objectOf(PropTypes.string)\n\nIt is possible to set `className` for extra `div` elements that ReactCollapse creates.\n\nExample:\n```js\n<Collapse theme={{collapse: 'foo', content: 'bar'}}>\n  <div>Customly animated container</div>\n</Collapse>\n```\n\nDefault values:\n```js\nconst theme = {\n  collapse: 'ReactCollapse--collapse',\n  content: 'ReactCollapse--content'\n}\n```\n\nWhich ends up in the following markup:\n```html\n<div class=\"ReactCollapse--collapse\">\n  <div class=\"ReactCollapse--content\">\n    {children}\n  </div>\n</div>\n```\n\nNOTE: these are not style objects, but class names!\n\n\n#### `onRest`: PropTypes.func\n\nCallback function for animation finished from\n[react-motion](https://github.com/chenglou/react-motion#--onrest---void).\nIt can be used to trigger any function after animation is done.\n\n```js\n<Collapse onRest={() => console.log(123)}>\n  <div>Container text</div>\n</Collapse>\n```\n\n#### `onMeasure`: PropTypes.func\n\nCallback function for changes in height. Also passes measured width.\nAs an [example](https://github.com/nutgaard/react-collapse/blob/master/src/example/App/Hooks.js) it can be used to implement auto-scroll if content expand below the fold.\n\n```js\n<Collapse onMeasure={({height, width}) => this.setState({height, width})}>\n  <div>Container text</div>\n</Collapse>\n```\n\n#### `onRender`: PropTypes.func\n\nCallback function for every re-render while animating.\n\nPasses `current` height, as well as `from`/`to` heights.\n\n**DANGEROUS** use with caution, may have huge performance impact if used improperly. Never do `setState` with it, since it is running while rendering and React will shoot Warning.\n \nPossible usage: synchronous scrolling of some other component\n```js\n<Collapse onRender={({current, from, to}) => (this.anotherComponent.scrollTop = current)}>\n  <div>Container text</div>\n</Collapse>\n```\n\n#### Pass-through props\n\nAll other props are applied to a container that is being resized. So it is possible to pass `style` or `className`, for example.\n\n```js\n<Collapse isOpened={true}\n  style={{width: 200, border: '1px solid red'}}\n  className=\"collapse\">\n\n  <div>\n    Animated container has red border, 200px width\n    and has `class=\"collapse\"`\n  </div>\n</Collapse>\n```\n\n\n## Behaviour notes\n\n- initially opened Collapse elements will be statically rendered with no animation (see [#19](https://github.com/nkbt/react-collapse/pull/19))\n- it is possible to override `overflow` and `height` styles for Collapse (see [#16](https://github.com/nkbt/react-collapse/pull/16)), and ReactCollapse may behave unexpectedly. Do it only when you definitely know you need it, otherwise, never override `overflow` and `height` styles.\n- Due to the complexity of margins and their potentially collapsible nature, ReactCollapse does not support (vertical) margins on their children. It might lead to the animation \"jumping\" to its correct height at the end of expanding. To avoid this, use padding instead of margin. (see [#101](https://github.com/nkbt/react-collapse/issues/101))\n\n## Migrating from v2 to v3\n\n1. Use named exports, it is a preferred way\n\n  V2:\n  ```js\n  import Collapse from 'react-collapse';\n  ```\n  \n  V3\n  ```js\n  import {Collapse} from 'react-collapse';\n  ```\n  \n2. Default behavior changed to never unmount collapsed element. To actually unmount use extra provided component `UnmountCollapsed`\n\n  V2: \n  ```js\n  import Collapse from 'react-collapse';\n  \n  <Collapse isOpened={true || false}>\n    <div>Random content</div>\n  </Collapse>\n  ```  \n\n  V3: \n  ```js\n  import {UnmountClosed as Collapse} from 'react-collapse';\n  \n  <Collapse isOpened={true || false}>\n    <div>Random content</div>\n  </Collapse>\n  ```  \n\n3. `onHeightReady` renamed to `onMeasure` which now takes object of shape `{width, height}`\n\n  V2: \n  ```js\n  <Collapse onHeightReady={height => console.log(height)}>\n    <div>Random content</div>\n  </Collapse>\n  ```  \n\n  V3: \n  ```js\n  <Collapse onMeasure={({height, width}) => console.log(height, width)}>\n    <div>Random content</div>\n  </Collapse>\n  ```  \n\n4. Some new props/features: `hasNestedCollapse`, `forceInitialAnimation`, `onRender`, etc\n\n\n## Development and testing\n\nCurrently is being developed and tested with the latest stable `Node 8` on `OSX`.\n\nTo run example covering all `ReactCollapse` features, use `yarn start`, which will compile `example/Example.js`\n\n```bash\ngit clone git@github.com:nkbt/react-collapse.git\ncd react-collapse\nyarn install\nyarn start\n\n# then\nopen http://localhost:8080\n```\n\n## Tests\n\n```bash\n# to run ESLint check\nyarn lint\n\n# to run tests\nyarn test\n\n# to run end-to-end tests\n# first, run `selenium/standalone-firefox:3.4.0` docker image\ndocker run -p 4444:4444 selenium/standalone-firefox:3.4.0\n# then run test\nyarn e2e\n```\n\n## License\n\nMIT\n","gitHead":"9221320a6616ca7eacee0af28e9ca36804917d34","license":"MIT","scripts":{"e2e":"scripts/e2e.js","lib":"scripts/lib.js","pub":"scripts/pub.js","dist":"scripts/dist.js","lint":"scripts/lint.js","test":"scripts/test.js","build":"scripts/build.js","start":"scripts/dev.js","ghPages":"scripts/ghPages.js","prepare":"yarn build","postversion":"git push --follow-tags"},"_npmUser":{"name":"nkbt","email":"nik@butenko.me"},"homepage":"https://github.com/nkbt/react-collapse","keywords":["component","react-component","react","collapse","slide-down","slide-up"],"repository":{"url":"git+https://github.com/nkbt/react-collapse.git","type":"git"},"_npmVersion":"5.6.0","description":"Component-wrapper for collapse animation for elements with variable (and dynamic) height","directories":{},"maintainers":[{"name":"nkbt","email":"nik@butenko.me"}],"_nodeVersion":"9.5.0","dependencies":{"prop-types":"^15.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"glob":"^7.1.2","tape":"^4.8.0","react":"^16.2.0","eslint":"^4.15.0","rimraf":"^2.6.2","webpack":"^4.5.0","gh-pages":"^1.1.0","babel-cli":"^6.26.0","react-dom":"^16.2.0","css-loader":"^0.28.8","nightwatch":"^0.9.19","portfinder":"^1.0.13","webpack-cli":"^2.0.14","babel-eslint":"^8.2.1","babel-loader":"^7.1.2","finalhandler":"^1.1.0","serve-static":"^1.13.1","style-loader":"^0.20.3","babel-register":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","webpack-dev-server":"^3.1.3","babel-preset-es2015":"^6.24.1","eslint-plugin-react":"^7.5.1","html-webpack-plugin":"^3.2.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","extract-text-webpack-plugin":"^4.0.0-beta.0","html-webpack-include-assets-plugin":"^1.0.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-remove-prop-types":"^0.4.12"},"peerDependencies":{"react":">=15.3"},"_npmOperationalInternal":{"tmp":"tmp/react-collapse_5.0.0-alpha.0_1523340160285_0.8131177171342303","host":"s3://npm-registry-packages"},"_id":"react-collapse@5.0.0-alpha.0","version":"5.0.0-alpha.0"}