react-calendar-timeline - npm Package Compare versions

Comparing version 0.14.0 to 0.14.1

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -96,3 +96,6 @@ # React Calendar Timeline
   itemProps: {
-    'data-custom-attribute': 'Random content'
+    // these optional attributes are passed to the root <div /> of each item as <div {...itemProps} />
+    'data-custom-attribute': 'Random content',
+    'aria-hidden': true,
+    onDoubleClick: () => { console.log('You clicked double!') }
   }
@@ -344,4 +347,4 @@ }
 // this limits the timeline to -6 months ... +6 months
-var minTime = moment().add(-6, 'months').valueOf()
-var maxTime = moment().add(6, 'months').valueOf()
+const minTime = moment().add(-6, 'months').valueOf()
+const maxTime = moment().add(6, 'months').valueOf()
 
@@ -372,2 +375,23 @@ function (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) {
 
+```jsx
+let items = [
+  {
+    id: 1,
+    group: 1,
+    title: 'Title',
+    tip: 'additional information',
+    ...
+  }
+]
+
+itemRenderer = ({ item }) => {
+  return (
+    <div className='custom-item'>
+      <span className='title'>{item.title}</span>
+      <p className='tip'>{item.tip}</p>
+    </div>
+  )
+}
+```
+
 ### groupRenderer
@@ -377,2 +401,21 @@ React component that will be used to render the content of groups in the
 
+```jsx
+let groups = [
+  {
+    id: 1,
+    title: 'Title',
+    tip: 'additional information'
+  }
+]
+
+groupRenderer = ({ group }) => {
+  return (
+    <div className='custom-group'>
+      <span className='title'>{group.title}</span>
+      <p className='tip'>{group.tip}</p>
+    </div>
+  )
+}
+```
+
 ### resizeDetector
@@ -382,3 +425,3 @@ The component automatically detects when the window has been resized. Optionally you can also detect when the component's DOM element has been resized.
 
-```js
+```jsx
 import componentResizeDetector from 'react-calendar-timeline/lib/resize-detector/component'
@@ -412,9 +455,9 @@
 To use it, you need to add two props to the `<Timeline />` component:
+```jsx
+rightSidebarWidth={150}
+rightSidebarContent={<p>Second filter</p>}
 ```
-      rightSidebarWidth={150}
-      rightSidebarContent={<p>Second filter</p>}
-```
 
 And add `right_sidebar` prop to the groups objects:
-```
+```js
 {
@@ -421,0 +464,0 @@ id: 1,

No alert changes

Improved metrics

Total package byte prevSize

278149

0.28%

Number of lines in readme file

499

9.43%

No dependency changes