@gikiapp/react-native-contribution-calendar

    0.2.5 • Public • Published

    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.

    Install

    npm i @gikiapp/react-native-contribution-calendar

    DownloadsWeekly Downloads

    7

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    98.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • metrue