Awesome
react-calendar-graph
Calendar graph like github for react.
installation
npm install -S @jswork/react-calendar-graph
usage
- import css
@import "~@jswork/react-calendar-graph/dist/style.css";
// or use sass
@import "~@jswork/react-calendar-graph/dist/style.scss";
// customize your styles:
$react-calendar-graph-options: ()
- import js
import React, { useEffect, useState } from 'react';
import ReactCalendarGraph from '../../src/main';
import '../../src/components/style.scss';
import styled from 'styled-components';
// @ts-ignore
import data from './data.json';
const Container = styled.div`
width: 80%;
margin: 30px auto 0;
.react-calendar-graph {
width: 90%;
}
`;
export default () => {
const [v, setV] = useState([]);
useEffect(() => {
setTimeout(() => {
setV(data);
}, 100);
}, []);
return (
<Container>
<ReactCalendarGraph data={v} />
</Container>
);
};
preview
license
Code released under the MIT license.