reactjs-accordion-ui - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

dist/cjs/index.js

@@ -1,2 +0,2 @@
-import e,{useState as o}from"react";!function(e,o){void 0===o&&(o={});var t=o.insertAt;if(e&&"undefined"!=typeof document){var c=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&c.firstChild?c.insertBefore(n,c.firstChild):c.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".accordion{border:1px solid #ccc}.accordion-item{border-bottom:1px solid #ccc;width:100%}.accordion-header{background-color:#f5f5f5;cursor:pointer;padding:10px;width:100%}.accordion-content{background-color:#fff;padding:10px}");const t=({items:t,width:c="500px",headerBackgroundColor:n="#ccc",contentBackgroundColor:d="#fff",onIcon:r,offIcon:a})=>{const[l,i]=o(Array(t.length).fill(!1));return e.createElement("div",{className:"accordion",style:{width:c}},t.map(((o,t)=>e.createElement("div",{key:t,className:"accordion-item"},e.createElement("div",{style:{display:"flex",backgroundColor:n}},e.createElement("div",{style:{backgroundColor:n,display:"flex"},className:"accordion-header",onClick:()=>(e=>{const o=[...l];o[e]=!o[e],i(o)})(t)},o.title),l[t]?r||null:a||null),l[t]&&e.createElement("div",{style:{backgroundColor:d},className:"accordion-content"},o.content)))))};export{t as ReactAccordion};
+import e,{useState as o}from"react";!function(e,o){void 0===o&&(o={});var t=o.insertAt;if(e&&"undefined"!=typeof document){var c=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&c.firstChild?c.insertBefore(n,c.firstChild):c.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".accordion{border:1px solid #ccc}.accordion-item{border-bottom:1px solid #ccc;width:100%}.accordion-header{background-color:#f5f5f5;cursor:pointer;padding:10px;width:100%}.accordion-content{background-color:#fff;padding:10px}");const t=({items:t,width:c="500px",headerBackgroundColor:n="#ccc",contentBackgroundColor:d="#fff",expandIcon:r,collapseIcon:a})=>{const[l,i]=o(Array(t.length).fill(!1));return e.createElement("div",{className:"accordion",style:{width:c}},t.map(((o,t)=>e.createElement("div",{key:t,className:"accordion-item"},e.createElement("div",{style:{display:"flex",backgroundColor:n}},e.createElement("div",{style:{backgroundColor:n,display:"flex"},className:"accordion-header",onClick:()=>(e=>{const o=[...l];o[e]=!o[e],i(o)})(t)},o.title),l[t]?a||null:r||null),l[t]&&e.createElement("div",{style:{backgroundColor:d},className:"accordion-content"},o.content)))))};export{t as ReactAccordion};
 //# sourceMappingURL=index.js.map

dist/cjs/types/src/components/ReactAccordion/ReactAccordion.d.ts

@@ -12,6 +12,6 @@ import React from 'react';
     contentBackgroundColor?: string;
-    offIcon?: React.ReactNode;
-    onIcon?: React.ReactNode;
+    collapseIcon?: React.ReactNode;
+    expandIcon?: React.ReactNode;
 }
 declare const ReactAccordion: React.FC<AccordionProps>;
 export default ReactAccordion;

dist/index.d.ts

@@ -12,4 +12,4 @@ import React from 'react';
     contentBackgroundColor?: string;
-    offIcon?: React.ReactNode;
-    onIcon?: React.ReactNode;
+    collapseIcon?: React.ReactNode;
+    expandIcon?: React.ReactNode;
 }
@@ -16,0 +16,0 @@ declare const ReactAccordion: React.FC<AccordionProps>;

package.json

 {
   "name": "reactjs-accordion-ui",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "A accordition component created using react and typescript",
@@ -20,6 +20,6 @@ "main": "dist/cjs/index.js",
     "type": "git",
-    "url": "https://github.com/SubramanyaKS//reactjs-accordion-ui"
+    "url": "https://github.com/SubramanyaKS/reactjs-accordion-ui"
   },
   "bugs": {
-    "url": "https://github.com/SubramanyaKS//reactjs-accordion-ui/issues"
+    "url": "https://github.com/SubramanyaKS/reactjs-accordion-ui/issues"
   },
@@ -26,0 +26,0 @@ "types": "dist/index.d.ts",

README.md

@@ -65,2 +65,25 @@ # reactjs-accordion-ui
 ```
+you can also give a `div` to content prop as shown below.
+
+```js
+import React from 'react';
+import {ReactAccordion} from 'reactjs-accordion-ui';
+
+const MyApp = () => {
+  const items = [
+    { title: 'Section 1', content: <div>Hi</div> },
+    { title: 'Section 2', content: 'Content for section 2' },
+    { title: 'Section 3', content: 'Content for section 3' },
+  ];
+
+  return (
+    <ReactAccordion items={items} width={"700px"} headerBackgroundColor={'#0f0'} />
+  );
+};
+
+export default MyApp;
+
+```
+
+
 ### Options
@@ -72,8 +95,8 @@
 | :---: | :---: | :---: |
-| `items` | `Array` | An array of objects representing the accordion items. Each object should have a `title` and `content` property. |
+| `items` | `Array` | An array of objects representing the accordion items. Each object should have a `title`type(string) and `content`(type ReactNode) property. |
 | `width` | `string` | The width of the accordion component. |
 |`headerBackgroundColor`|`string`|The background color of the accordion header.|
 |`contentBackgroundColor`|`string`|The background color of the accordion content.|
-|`offIcon`|`ReactNode`|The icon when the content is not shown|
-|`onIcon`|`ReactNode`|The icon when the content is shown|
+|`colapseIcon`|`ReactNode`|The icon display when an accordion item is expanded|
+|`expandIcon`|`ReactNode`|The icon content to display when an accordion item is collapsed|
 
@@ -86,2 +109,2 @@
 
-This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.

No alert changes

Improved metrics

Total package byte prevSize

10259

increased by6.63%

Lines of code

61

increased by1.67%

Number of lines in readme file

107

increased by27.38%

No dependency changes