README
React Google Sheets Timeline
Simple timeline pulling data from a Google Sheet
Demo:
How to Use
spreadsheet template and add your data for the timeline.
Step 1: Make a copy of our- Year, month, and day should be given as numbers (ie. 2019, 11, 11 for November 11, 2019).
- The link and link text will be used to generate a link that opens in a new tab.
- If the "Highlight" column is checked, the resulting timeline item will have a colored background.
Step 2: Make the spreadsheet public on the web
Update the sharing settings to that anyone can find and view the spreadsheet
Step 3: Get a google API key
- You must have a google account
- On the Google developers console, create a project for your website if you haven't already
- On the Google APIs dashboard, go to the Credentials tab and click on "Create credentials", then select "API key" to create an API key for your project.
Step 4: Install and import the React component in your project
Install the package:
yarn add react-gsheets-timeline
or
npm install react-gsheets-timeline
Import into your app:
import React from 'react';
import { render } from 'react-dom';
import Timeline from 'react-gsheets-timeline';
const config = {
"Colonial Timeline": {
icon: <i className="fas fa-paw"></i>,
color: "#2f6165",
},
"Company Timeline": {
icon: <i className="fas fa-feather"></i>,
color: "#b46547"
},
"Land Cessation Treaties": {
icon: <i className="fas fa-fish"></i>,
color: "#423243"
}
}
const App = props => (
<div className="wrapper">
<h1>Timeline Demo</h1>
<Timeline
spreadsheetId={"1PtqsSJq3wl09Q_IW-pgxSiXSLMYxDcrOeda7AMCM5Js"}
sheets={["Colonial Timeline", "Company Timeline", "Land Cessation Treaties"]}
apiKey={"YOUR API KEY"}
config={config}
/>
</div>
)
Props
Prop | Type | Description |
---|---|---|
spreadsheetId (required) |
String | The ID of the google spreadsheet, found in the URL after https://docs.google.com/spreadsheets/d/ and before the next / |
sheets (required) |
Array of Strings | An array of the sheet titles. The sheet title is on the tab at the bottom of the sheet. Each sheet will be a different category in the timeline. |
apiKey (required) |
String | The API key for your google project |
config (optional) |
Object | Configuration object for timeline icons and colors |
Configuration
The config prop accepts an object in which you can configure the icon and color for each timeline category. The config object should have a key for each sheet that you want to customize. The configuration for each sheet should have the following shape:
{
["First sheet title"]: {
color: String (any valid CSS value),
icon: Node (React component or JSX)
}
}
Font Awesome 5.0 Free icons are already included in the package.
Defaults
The default icons are the square, circle and star from Font Awesome. The timeline categories will rotate through those three if no custom icon is provided. The default colors are "darkcyan", "darkslateblue", and "firebrick". The timeline categories will rotate through them if no custom color is provided.