rnc

@gikiapp/react-native-contribution-calendar

React-native calendar heat-map, inspired by Github's contribution graph

Showing:

Popularity

Downloads/wk

2

GitHub Stars

93

Maintenance

Last Commit

1mo ago

Contributors

11

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React-native Calendar Heatmap

React Native Calendar Heatmap

A calendar heatmap component built on SVG. The component expands to size of container and is super configurable.

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Calendar Heatmap


React Native Calendar Heatmap

Installation

Add the dependency:

React Native:

npm i react-native-calendar-heatmap

Peer Dependencies

IMPORTANT! You need install them.
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"lodash": ">= 4.17.10",
"react-native-svg": ">= 6.5.2"

Usage

Import the component:

import CalendarHeatmap from 'react-native-calendar-heatmap';

To show a basic heatmap of 100 days ending on April 1st:

<CalendarHeatmap
  endDate={new Date('2016-04-01')}
  numDays={100}
  values={[
    { date: '2016-01-01' },
    { date: '2016-01-22' },
    { date: '2016-01-30' },
    // ...and so on
  ]}
/>

Custom Colorized Usage

You can check the example for the advanced usage

<CalendarHeatmap
  endDate={new Date("2019-03-25")}
  numDays={100}
  colorArray={["#eee", "#D44B79", "#6B1928", "#9F3251", "#360000"]}
  values={[
    { date: '2016-01-01' },
    { date: '2016-01-22' },
    { date: '2016-01-30' },
    // ...and so on
  ]}
/>

Credits

It inspired by Github's commit calendar graph and React Calendar Heatmap.

License

React Native Calendar Heatmap Library is available under the MIT license. See the LICENSE file for more info.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100