react-contribution-calendar - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

package.json

 {
   "name": "react-contribution-calendar",
   "description": "A GitHub-like contribution calendar component for React",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "./dist/index.js",

README.md

@@ -15,5 +15,2 @@ # react-contribution-calendar
 
-> **Note**  
-> Add --save if you are using npm < 5.0.0
-
 <br />
@@ -29,44 +26,52 @@
 
-```js
+```jsx
 import { ContributionCalendar } from 'react-contribution-calendar'
 
-const data = [
-  {
-    '2020-04-20': { level: 2 }
-  },
-  {
-    '2023-07-08': { level: 1 },
-  },
-  {
-    '2023-07-09': { level: 4, data: {} },
-  },
-  {
-    '2023-03-31': {
-      level: 3,
-      data: {
-        myKey: 'my data',
+function App() {
+  const data = [
+    {
+      '2020-04-20': { level: 2 }
+    },
+    {
+      '2023-07-08': { level: 1 },
+    },
+    {
+      '2023-07-09': { level: 4, data: {} },
+    },
+    {
+      '2023-03-31': {
+        level: 3,
+        data: {
+          myKey: 'my data',
+        },
       },
     },
-  },
-]
+  ]
 
-<ContributionCalendar
-  data={data}
-  start="2020-04-04"
-  end="2023-05-19"
-  daysOfTheWeek={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
-  textColor="#1F2328"
-  startsOnSunday={true}
-  includeBoundary={true}
-  theme="grass"
-  cx={10}
-  cy={10}
-  cr={2}
-  onCellClick={(e, data) => console.log(data)}
-  scroll={false}
-  style={}
-  hideDescription={false}
-  hideMonthLabels={false}
-  hideDayLabels={false}
-/>
+  return (
+    <ContributionCalendar
+      data={data}
+      dateOptions={{
+        start: '2020-04-04',
+        end: '2023-05-19',
+        daysOfTheWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        startsOnSunday: true,
+        includeBoundary: true,
+      }}
+      styleOptions={{
+        theme: 'grass',
+        cx: 10,
+        cy: 10,
+        cr: 2,
+      }}
+      visibilityOptions={{
+        hideDescription: false,
+        hideMonthLabels: false,
+        hideDayLabels: false,
+      }}
+      onCellClick={(e, data) => console.log(data)}
+      scroll={false}
+    />
+  )
+}
 ```
@@ -103,17 +108,21 @@
 
-- **`start`**: Optional. The starting date for the calendar to start, defaults to current year's January 1st(`YYYY-MM-DD` format).
-- **`end`**: Optional. The ending date for the calendar to end, defaults to current year's December 31st(`YYYY-MM-DD` format).
-- **`daysOfTheWeek`**: Optional. The days of the week, which will be the head column of each row. The array should start from Sunday so that you can use with `startsOnSunday` option correctly. Defaults to `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`.
-- **`textColor`**: Optional. The color of indexes. String color code format, defaults to `#1F2328`.
-- **`startsOnSunday`**: Optional. Whether to start the calendar on Sunday or not, defaults to `true`. If set to false, calendar will start on Monday.
-- **`includeBoundary`**: Optional. Whether to include the boundary cells in the starting or ending date column, defaults to `true`.
-- **`theme`**: Optional. A string that represents a predefined theme name, or an object with custom theme colors. Defaults to `grass`.
-- **`cx`**: Optional. The pixel size of width of each cell, defaults to `10`.
-- **`cy`**: Optional. The pixel size of height of each cell, defaults to `10`.
-- **`cr`**: Optional. The pixel size of border radius of each cell, defaults to `2`.
+- **`dateOptions`**: Optional. Defines options for date.
+  - **`start`**: Optional. The starting date for the calendar to start, defaults to current year's January 1st(`YYYY-MM-DD` format).
+  - **`end`**: Optional. The ending date for the calendar to end, defaults to current year's December 31st(`YYYY-MM-DD` format).
+  - **`daysOfTheWeek`**: Optional. The days of the week, which will be the head column of each row. The array should start from Sunday so that you can use with `startsOnSunday` option correctly. Defaults to `['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`.
+  - **`startsOnSunday`**: Optional. Whether to start the calendar on Sunday or not, defaults to `true`. If set to false, calendar will start on Monday.
+  - **`includeBoundary`**: Optional. Whether to include the boundary cells in the starting or ending date column, defaults to `true`.
+- **`styleOptions`**: Optional. Defines options for table or cell's style.
+  - **`textColor`**: Optional. The color of indexes. String color code format, defaults to `#1F2328`.
+  - **`style`**: Optional. Root styles for the ContributionCalendar.
+  - **`theme`**: Optional. A string that represents a predefined theme name, or an object with custom theme colors. Defaults to `grass`.
+  - **`cx`**: Optional. The pixel size of width of each cell, defaults to `10`.
+  - **`cy`**: Optional. The pixel size of height of each cell, defaults to `10`.
+  - **`cr`**: Optional. The pixel size of border radius of each cell, defaults to `2`.
+- **`visibilityOptions`**: Optional. Defines visibility for column or row index visibility.
+  - **`hideDescription`**: Optional. Allows you to hide the description displayed at the bottom of the graph.
+  - **`hideMonthLabels`**: Optional. Allows you to hide the month labels displayed at the top of the graph.
+  - **`hideDayLabels`**: Optional. ALlows you to hide the day labels displayed at the side of the graph.
 - **`scroll`**: Optional. Whether to show scrollbar or not, defaults to `false`.
 - **`onCellClick`**: Optional. An onClick mouse event on each table cell.
-- **`hideDescription`**: Optional. Allows you to hide the description displayed at the bottom of the graph.
-- **`hideMonthLabels`**: Optional. Allows you to hide the month labels displayed at the top of the graph.
-- **`hideDayLabels`**: Optional. ALlows you to hide the day labels displayed at the side of the graph.
 
@@ -296,3 +305,3 @@ <br />
 
-  return <ContributionCalendar theme={customTheme} />
+  return <ContributionCalendar styleOptions={{ theme: customTheme }} />
 }
@@ -309,9 +318,11 @@ ```
     <ContributionCalendar
-      theme={{
-        /* Assign theme properties directly */
-        level0: '#ebedf0',
-        level1: '#9be9a8',
-        level2: '#40c463',
-        level3: '#30a14e',
-        level4: '#216e39',
+      styleOptions={{
+        theme: {
+          /* Assign theme properties directly */
+          level0: '#ebedf0',
+          level1: '#9be9a8',
+          level2: '#40c463',
+          level3: '#30a14e',
+          level4: '#216e39',
+        }
       }}
@@ -331,9 +342,11 @@ />
     <ContributionCalendar
-      theme={{
-        isTextTheme: true, // <--- Must be added if it's a text theme.
-        level0: '🙂',
-        level1: '🤔',
-        level2: '😎',
-        level3: 'A',
-        level4: 'B',
+      styleOptions={{
+        theme: {
+          isTextTheme: true, // <--- Must be added if it's a text theme.
+          level0: '🙂',
+          level1: '🤔',
+          level2: '😎',
+          level3: 'A',
+          level4: 'B',
+        }
       }}
@@ -340,0 +353,0 @@ />

No alert changes

Improved metrics

Total package byte prevSize

57617

increased by1.07%

Number of lines in readme file

351

increased by3.85%

No dependency changes