{"_id":"@andriycidt/react-collapsible","_rev":"1-030204ea6d9d5be0bcb48da3154b657a","name":"@andriycidt/react-collapsible","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@andriycidt/react-collapsible","version":"1.0.0","description":"React component to wrap content in Collapsible element with trigger to open and close.","keywords":["react-component","react","collapse","collapsible","accordion"],"main":"dist/Collapsible.js","types":"./index.d.ts","author":{"name":"Andrii Rudiuk","email":"andriycidt@gmail.com"},"license":"MIT","devDependencies":{"autoprefixer":"^7.1.2","babel":"^5.6.23","babel-cli":"^6.11.4","babel-core":"^6.24.1","babel-loader":"^7.0.0","babel-preset-es2015":"^6.13.2","babel-preset-react":"^6.11.1","css-loader":"^3.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","mini-css-extract-plugin":"^0.8.0","jest":"^22.4.3","node-sass":"^4.13.0","postcss-loader":"^3.0.0","prop-types":"^15.6.1","react":"^16.3.1","react-dom":"^16.3.1","sass-loader":"^8.0.0","webpack":"^4.41.2","webpack-cli":"^3.3.10","webpack-dev-server":"^3.9.0"},"repository":{"type":"git","url":"git+https://github.com/glennflanagan/react-collapsible.git"},"bugs":{"url":"https://github.com/glennflanagan/react-collapsible/issues"},"scripts":{"build":"babel src/Collapsible.js > dist/Collapsible.js","prepare":"npm run build","example":"webpack-dev-server","test":"jest"},"peerDependencies":{"prop-types":"^15.5.8","react":"~15 || ~16","react-dom":"~15 || ~16"},"homepage":"https://github.com/glennflanagan/react-collapsible#readme","directories":{"example":"example"},"gitHead":"2513ce92bcb4ee412d15fa91b3fdb1d2a23a64ed","_id":"@andriycidt/react-collapsible@1.0.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-IbzLQumhVDz76MwKx/u+8rMJ2tHtXqJhWQm7rdYalGfvRRzciNSXzj5Ogmy8FcbInmkjOrEIsafnbZkJQaL4RA==","shasum":"c6913d4bf4d62c4df4bd0621fca6419d2f038b09","tarball":"https://registry.npmjs.org/@andriycidt/react-collapsible/-/react-collapsible-1.0.0.tgz","fileCount":11,"unpackedSize":37581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegvOlCRA9TVsSAnZWagAAQ1wQAKKWRmKeXSuFxCVBktKC\nDK+0V3Mplgzkq8FyE6Wek1WdNzaK9O8uWzCYbe4Oo5/0slVO8LPhej8VFSKu\n9Zc6jmdJkPcTwgxaw4+EPC+zHZJUOOc9TktbB9SgQLauiuE89OxppLgh9MtL\n8rl4YC6/sNMKO/zHwUTqicaneYBlbLFDoy7Gn4wXSUBDdr9P+sCpekMm8s63\nrviclz5l42WKjMWP+g+UyefCh0gEW06rW3mAZAvr6Sy/LV04rQfMP852Y//2\n98MXKAQe1eGysrFuUoE/lv3F0Y0pEQnqvDn4pBAzHqcu3ao9C72pm7C5T68w\nEPgeTAhHxHMkeKmhsUVUSIYbDzmL5+qpwDtuXlsTXkArnRyNvcSk/olHiOSq\nRwnlaTSSblWPEAVRtsYA9/yZOpbN6ZeCgDI+sVg/MQ9gdBQ04A2Oel39CDI3\nsiqEhLBj7pnLxQwfafgHMw5kDHJoCmFfHKB/YKpRKHBFqmlAniIt9XkCM/z9\nL8yJaQxRPXRp+SnoXY8WIhu7iGMhZ9xtjaWe4r4bZfSW/18iYlsJsldEJq3N\nTkUuVm7gHy3rzrsBwOUoj0QXFVMoXUSMmpBx8mvaCkjY1BUZY+KO+f55Upv4\nIWwHB+/t91tyZW6r2YurSw01FvuSBTeGDnI24F4pmLjhS6wkujr4IHOK3/cC\n4g/J\r\n=VoEp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6CF31iDnHIZoO4D3H8YRcY57mUCQPUHzxo/9o4eFUgAiA04TiemNH3i1+WfjydGr4GZptTg1TZCAvXMDF29YkHqQ=="}]},"maintainers":[{"name":"andriycidt","email":"andriycidt@gmail.com"}],"_npmUser":{"name":"andriycidt","email":"andriycidt@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-collapsible_1.0.0_1585640357296_0.2872694007736407"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-31T07:39:17.042Z","1.0.0":"2020-03-31T07:39:17.413Z","modified":"2022-04-04T14:02:24.600Z"},"maintainers":[{"name":"andriycidt","email":"andriycidt@gmail.com"}],"description":"React component to wrap content in Collapsible element with trigger to open and close.","homepage":"https://github.com/glennflanagan/react-collapsible#readme","keywords":["react-component","react","collapse","collapsible","accordion"],"repository":{"type":"git","url":"git+https://github.com/glennflanagan/react-collapsible.git"},"author":{"name":"Andrii Rudiuk","email":"andriycidt@gmail.com"},"bugs":{"url":"https://github.com/glennflanagan/react-collapsible/issues"},"license":"MIT","readme":"[![Npm Version](https://img.shields.io/npm/v/react-collapsible.svg?style=flat-square)](https://www.npmjs.com/package/react-collapsible) [![License](https://img.shields.io/npm/l/react-collapsible.svg?style=flat-square)](https://github.com/glennflanagan/react-collapsible/blob/develop/LICENSE.md) [![Downloads Per Week](https://img.shields.io/npm/dw/react-collapsible.svg?style=flat-square)](https://npmcharts.com/compare/react-collapsible)\n\n# React Responsive Collapsible Section Component (Collapsible)\n\nReact component to wrap content in Collapsible element with trigger to open and close.\n\n![Alt text](example/img/example.gif)\n\nIt's like an accordion, but where any number of sections can be open at the same time.\n\nSupported by [Browserstack](https://www.browserstack.com).\n\n![Browserstack Logo](example/img/browserstack-logo.png \"Browserstack\")\n\n---\n## Migrating from v1.x to v2.x\nVersion 2 is 100% API complete to version 1. However, there is a breaking change in the `onOpen` and `onClose` callbacks. These methods now fire at the end of the collapsing animation. There is also the addition of `onOpening` and `onClosing` callbacks which fire at the beginning of the animation.\n\nTo migrate to v2 from v1 simply change the `onOpen` prop to `onOpening` and `onClose` to `onClosing`.\n\n## Installation\nInstall via npm or yarn\n\n```\nnpm install react-collapsible --save\nyarn add react-collapsible\n```\n\nAlternatively just download the `Collapsible.js` file form the `src` folder and include it in your project in your chosen way.\n\n## Usage\nCollapsible can receive any HTML elements or React component as it's children. Collapsible will wrap the contents, as well as generate a trigger element which will control showing and hiding.\n\n### ES6\n```javascript\n\nimport React from 'react';\nimport Collapsible from 'react-collapsible';\n\nvar App = React.createClass({\n\n  render: function() {\n    return(\n\n      <Collapsible trigger=\"Start here\">\n        <p>This is the collapsible content. It can be any element or React component you like.</p>\n        <p>It can even be another Collapsible component. Check out the next section!</p>\n      </Collapsible>\n\n    );\n  }\n\n});\n\nexport default App;\n```\n\nWith a little CSS becomes\n\n![Alt text](example/img/becomes.png)\n\n## Properties *(Options)*\n\n### **contentContainerTagName** | *string* | default: `div`\nTag Name for the Collapsible Root Element.\n\n### **containerElementProps** | *object*\nPass props (or attributes) to the top div element. Useful for inserting `id`.\n\n### **trigger** | *string* or *React Element* | **required**\nThe text or element to appear in the trigger link.\n\n### **triggerTagName** | *string* | default: span\nThe tag name of the element wrapping the trigger text or element.\n\n### **triggerStyle** | *object* | default: null\nAdds a style attribute to the trigger.\n\n### **triggerWhenOpen** | *string* or *React Element*\nOptional trigger text or element to change to when the Collapsible is open.\n\n### **triggerDisabled** | *boolean* | default: false\nDisables the trigger handler if `true`. Note: this has no effect other than applying the `.is-disabled` CSS class if you've provided a `handleTriggerClick` prop.\n\n### **triggerElementProps** | *object*\nPass props (or attributes) to the trigger wrapping element. Useful for inserting `role` when using `tabIndex`.\n\n### **transitionTime** | *number* | default: 400\nThe number of milliseconds for the open/close transition to take.\n\n### **transitionCloseTime** | *number* | default: null\nThe number of milliseconds for the close transition to take.\n\n### **easing** | *string* | default: 'linear'\nThe CSS easing method you wish to apply to the open/close transition. This string can be any valid value of CSS `transition-timing-function`. For reference view the [MDN documentation](https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function).\n\n### **open** | *bool* | default: false\nSet to true if you want the Collapsible to begin in the open state. You can also use this prop to manage the state from a parent component.\n\n### **accordionPosition** | *string*\nUnique key used to identify the `Collapse` instance when used in an accordion.\n\n### **handleTriggerClick** | *function*\nDefine this to override the click handler for the trigger link. Takes one parameter, which is `props.accordionPosition`.\n\n### **onOpen** | *function*\nIs called when the Collapsible has opened.\n\n### **onClose** | *function*\nIs called when the Collapsible has closed.\n\n### **onOpening** | *function*\nIs called when the Collapsible is opening.\n\n### **onClosing** | *function*\nIs called when the Collapsible is closing.\n\n### **lazyRender** | *bool* | default: false\nSet this to true to postpone rendering of all of the content of the Collapsible until before it's opened for the first time\n\n### **overflowWhenOpen** | *enum* | default: 'hidden'\nThe CSS overflow property once the Collapsible is open. This can be any one of the valid CSS values of `'hidden'`, `'visible'`, `'auto'`, `'scroll'`, `'inherit'`, `'initial'`, or `'unset'`\n\n### **triggerSibling** | *element* | default: null\nEscape hatch to add arbitrary content on the trigger without triggering expand/collapse. It's up to you to style it as needed. This is inserted in component tree and DOM directly\nafter `.Collapsible__trigger`\n\n### **tabIndex** | *number* | default: null\nA `tabIndex` prop adds the `tabIndex` attribute to the trigger element which in turn allows the Collapsible trigger to gain focus.\n\n## CSS Class String Props\n### **classParentString** | *string* | default: Collapsible\nUse this to overwrite the parent CSS class for the Collapsible component parts. Read more in the CSS section below.\n\n### **className** | *string*\n`.Collapsible` element (root) when closed\n\n### **openedClassName** | *string*\n`.Collapsible` element (root) when open\n\n### **triggerClassName** | *string*\n`.Collapsible__trigger` element (root) when closed\n\n### **triggerOpenedClassName** | *string*\n`.Collapsible__trigger` element (root) when open\n\n### **contentOuterClassName** | *string*\n`.Collapsible__contentOuter` element\n\n### **contentInnerClassName** | *string*\n`.Collapsible__contentInner` element\n\n## CSS Styles\nIn theory you don't need any CSS to get this to work, but let's face it, it'd be pretty rubbish without it.\n\nBy default the parent CSS class name is `.Collapsible` but this can be changed by setting the `classParentString` property on the component.\n\nThe CSS class names follow a [type of BEM pattern](http://getbem.com/introduction/) of CSS naming. Below is a list of the CSS classes available on the component.  \n\n\n### `.Collapsible`\nThe parent element for the components.\n\n### `.Collapsible__trigger`\nThe trigger link that controls the opening and closing of the component.\nThe state of the component is also reflected on this element with the modifier classes;\n- `is-closed` | Closed state\n- `is-open` | Open setState\n- `is-disabled` | Trigger is disabled\n\n### `.Collapsible__contentOuter`\nThe outer container that hides the content. This is set to `overflow: hidden` within the javascript but everything else about it is for you to change.\n\n### `.Collapsible__contentInner`\nThis is a container for the content passed into the component. This keeps everything nice and neat and allows the component to do all it's whizzy calculations.\n\nIf you're using a CSS framework such as Foundation or Bootstrap, you probably want to use their classes instead of styling `.Collapsible`. See Properties above.\n\n## Example\nAn example of the component in action is available in the example folder. To see it in action you can run\n\n```bash\n$ npm i\n$ npm run example\n```\n\nThis will run the webpack build and open the example.\n\n## Issues\n\nPlease create an issue for any bug or feature requests.\n\nHere is a plain [JSFiddle](https://jsfiddle.net/sm7n31p1/1/) to use for replicating bugs.\n\n\n## Licence\nReact Responsive Collapsible Section Component is [MIT licensed](LICENSE.md)\n","readmeFilename":"README.md"}