react-accordion-component - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

example/accordion.js

@@ -24,8 +24,2 @@ var React = require('react');
 
-var Example = React.createClass({displayName: "Example",
-  render: function(){
-    return React.createElement(Accordion, {elements: elements})
-  }
-});
-
-React.render(React.createElement(Example, null), document.getElementById('accordion-example'))
+React.render(React.createElement(Accordion, {elements: elements}), document.getElementById('accordion-example'))

example/accordion.jsx

@@ -24,8 +24,2 @@ var React = require('react');
 
-var Example = React.createClass({
-  render: function(){
-    return <Accordion elements={elements} />
-  }
-});
-
-React.render(<Example />, document.getElementById('accordion-example'))
+React.render(<Accordion elements={elements}/>, document.getElementById('accordion-example'))

package.json

 {
   "name": "react-accordion-component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Minimal UI Accordion component written in React",
@@ -5,0 +5,0 @@ "main": "js/accordion.js",

README.md

@@ -1,3 +0,62 @@
-#React Accordion
+#React Accordion Component
 
-![](logo.jpg)
+![](public/logo.jpg)
+
+#Installation
+```sh
+$ npm install react-accordion-component
+```
+  
+#Usage
+To get the basic style of the component, link in your `index.html` the CSS file for the Accordion:
+```html
+<link rel="stylesheet" href=/path/to/accordion.css>
+```
+(normally located under your `node_modules` directory)
+ 
+ After that just require the component in the desired place of use:
+ ```javascript 
+ var Accordion = require('react-accordion-component');
+ ```
+ 
+ The `Accordion` accepts an array of objects, where each of them may have: 
+ + `title`: title for an accordion element (`string`)
+ + `onClick`: callback function triggered when an accordion element is clicked (`function`)
+ + `content`: content for an accordion element (`string`)
+
+##Example
+```javascript
+var elements = [];
+elements.push({
+    title: 'Element 1',
+    onClick: function() {
+      alert('Hello World!')
+    },
+    content: 'Lorem Ipsum...'
+  });
+  
+  elements.push({
+    title: 'Element 2',
+    onClick: function() {
+    },
+    content: 'Lorem Ipsum...'
+  });
+```
+When rendering (using `jsx`):
+```javascript
+React.render(<Accordion elements={elements} />, document.gtElementById('accordion-example'));
+```
+
+#Notes
+In the `index.html` under `examples/` I've used Source Sans Pro font from Google Fonts. Feel free to change the font in `accordion.css` to your preferred font.
+
+#TODO
++ Add bower support
++ Add `title` property to the accordion(e.g. `<Accordion elements={elements} title={title} />`
++ Add CSS animations
++ Add API to interact with elements
+
+#License
+MIT
+
+

No alert changes

Improved metrics

Total package byte prevSize

722252

increased by0.16%

Number of lines in readme file

63

increased by1475%

Worsened metrics

Lines of code

17887

decreased by-0.08%

No dependency changes