react-simple-collapsible-element - npm Package Compare versions

Comparing version 2.0.11 to 3.0.0

dist/CollapsePane.js

@@ -75,2 +75,3 @@ "use strict";
     _react2.default.createElement(_Title2.default, {
+      active: (0, _util.checkIfActive)(d, b, f),
       titleStyle: h,
@@ -101,3 +102,4 @@ index: b,
       _propTypes2.default.string,
-      _propTypes2.default.element
+      _propTypes2.default.element,
+      _propTypes2.default.func
     ]),
@@ -107,3 +109,4 @@ content: _propTypes2.default.oneOfType([
       _propTypes2.default.element,
-      _propTypes2.default.array
+      _propTypes2.default.array,
+      _propTypes2.default.func
     ])
@@ -110,0 +113,0 @@ }).isRequired,

dist/Collapsible.js

@@ -0,0 +0,0 @@ "use strict";

dist/Content.js

@@ -105,3 +105,3 @@ "use strict";
             },
-            b
+            "function" == typeof b ? b(c) : b
           );
@@ -118,3 +118,4 @@ }
     _propTypes2.default.number,
-    _propTypes2.default.element
+    _propTypes2.default.element,
+    _propTypes2.default.func
   ]).isRequired,
@@ -121,0 +122,0 @@ active: _propTypes2.default.bool,

dist/Title.js

@@ -115,3 +115,3 @@ "use strict";
             },
-            c
+            "function" == typeof c ? c(f) : c
           );
@@ -128,3 +128,4 @@ }
     _propTypes2.default.number,
-    _propTypes2.default.element
+    _propTypes2.default.element,
+    _propTypes2.default.func
   ]).isRequired,
@@ -131,0 +132,0 @@ onCollapse: _propTypes2.default.func.isRequired,

index.js

 module.exports = require('./dist/Collapsible');

package.json

 {
   "name": "react-simple-collapsible-element",
-  "version": "2.0.11",
+  "version": "3.0.0",
   "description": "simple react collapsible supports nested elements",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,4 +5,15 @@ # react-simple-collapsible-element
 
-[Demo](http://dashing-attention.surge.sh/).
+## Demo
 
+```
+See example for demo, npm install and npm start
+```
+
+## Why use this?
+
+```
+Simple, Lightweight, Production-ready, has all the common use cases covered. Data for the collapsible can be jsx or
+pure JSON data coming from a CMS by non-technical people.
+```
+
 ## Install
@@ -17,3 +28,3 @@
 ```
-$ Simple react collapsible supports nested element and custom styling.
+$ Production-ready Simple react collapsible supports nested element and custom styling.
 ```
@@ -24,20 +35,28 @@
 ```js
-import Collapsible from 'react-simple-collapsible-element';
+import Collapsible from "react-simple-collapsible-element";
 
 const data = [
   {
-    title: 'title 1',
-    content: 'content 1',
+    title: "title 1",
+    // title: <myReactComponent /> this is ok too!
+    // title: (open) => open ? <PurchaseForm /> : <ProductCard />  this is ok too!
+    content: "content 1" // content: <PayButton /> or content: (open) => <PayButton isActive={open} />
   },
   {
-    title: <h1>title 2</h1>,
-    contentStyle: { backgroundColor: 'red' }, // can be a classname also.
-    activeContentStyle: 'activeContentStyle', // classname
-    content: (
+    // title and content can be a function or non-function.
+    // open props is only true when the children which is content is open.
+    title: open => (
+      <h1 style={{ color: open ? "orange" : "white " }}>title 2</h1>
+    ),
+    // title: <h1>title 2</h1>   this is ok too!
+    contentStyle: { backgroundColor: "red" }, // can be a classname also.
+    activeContentStyle: "activeContentStyle", // classname
+    content: open => (
       <ul>
+        <li>{open ? "This content is currently open" : ""}</li>
         <li>content 2</li>
         <li>content 2</li>
       </ul>
-    ),
-  },
+    )
+  }
 ];
@@ -55,3 +74,3 @@
   {
-    title: <h1>title 1</h1>,
+    title: (open) => <h1>title 1 { open ? 'this is current opened!' : 'its close ATM'}</h1>,
     content: <span>content 1</span>,
@@ -78,13 +97,19 @@ contentStyle: 'content-class'
 
+## Title and Content as a function
+
+```
+When title and content are functions, it takes a boolean as a params, it is false by default if the Collapsible is current closed.
+```
+
 ## Props
 
-| Name                 | Type              | Default               | Description                                                              |
-| :------------------- | :---------------- | :-------------------- | :----------------------------------------------------------------------- |
-| `title`              | `Element`         | `'div'`               | parent                                                                   |
-| `content`            | `Element / array` | `div`                 | child                                                                    |
-| `keepOpen`           | `bool`            | `false`               | whether or not keep the current element open when click on other element |
-| `customTransition`   | `String`          | `height .3s ease-out` | custom transition                                                        |
-| `titleStyle`         | `String / Object` | `undefined`           | Can be a style object or multiple classnames together.                   |
-| `contentStyle`       | `String / Object` | `undefined`           | Can be a style object or multiple classnames together.                   |
-| `activeTitleStyle`   | `String`          | `undefined`           | a classname to pass to when the title is active.                         |
-| `activeContentStyle` | `String`          | `undefined`           | a classname to pass to when the content is active.                       |
+| Name                 | Type                               | Default               | Description                                                              |
+| :------------------- | :--------------------------------- | :-------------------- | :----------------------------------------------------------------------- |
+| `title`              | `Element, function, string`        | `'div'`               | parent                                                                   |
+| `content`            | `Element, string, function, array` | `div`                 | child                                                                    |
+| `keepOpen`           | `bool`                             | `false`               | whether or not keep the current element open when click on other element |
+| `customTransition`   | `String`                           | `height .3s ease-out` | custom transition                                                        |
+| `titleStyle`         | `String / Object`                  | `undefined`           | Can be a style object or multiple classnames together.                   |
+| `contentStyle`       | `String / Object`                  | `undefined`           | Can be a style object or multiple classnames together.                   |
+| `activeTitleStyle`   | `String`                           | `undefined`           | a classname to pass to when the title is active.                         |
+| `activeContentStyle` | `String`                           | `undefined`           | a classname to pass to when the content is active.                       |

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25511

increased by2.78%

Lines of code

563

increased by0.9%

Number of lines in readme file

111

increased by29.07%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes