react-calendar-graph

Calendar graph like github for react.

installation

npm install -S @jswork/react-calendar-graph

usage

import ReactCalendarGraph from '@jswork/react-calendar-graph';
import '@jswork/react-calendar-graph/dist/style.scss';
import dataJson from './assets/data.json';
import { useEffect, useState } from 'react';

function App() {
  const [v, setV] = useState<any>([]);

  useEffect(() => {
    setTimeout(() => {
      setV(dataJson);
    }, 100);
  }, []);

  return (
    <div className="m-10 p-4 shadow bg-gray-100 text-gray-800 hover:shadow-md transition-all">
      <div className="badge badge-warning absolute right-0 top-0 m-4">
        Build Time: {BUILD_TIME}
      </div>
      <div className="text-center">
        <ReactCalendarGraph
          data={v}
          style={{
            padding: '10px',
            background: 'white',
            borderRadius: '5px',
          }}
        />
      </div>
    </div>
  );
}

export default App;

preview

• https://afeiship.github.io/react-calendar-graph/

license

Code released under the MIT license.