https://github.com/gergelyke/codelabs-react
A bring-your-own-styles React library that turns Google Codelabs into React components
https://github.com/gergelyke/codelabs-react
codelab react
Last synced: about 1 year ago
JSON representation
A bring-your-own-styles React library that turns Google Codelabs into React components
- Host: GitHub
- URL: https://github.com/gergelyke/codelabs-react
- Owner: gergelyke
- Created: 2020-12-13T15:41:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-26T15:31:17.000Z (about 5 years ago)
- Last Synced: 2025-03-28T02:14:04.173Z (about 1 year ago)
- Topics: codelab, react
- Language: JavaScript
- Homepage: https://codelabs-react.netlify.app
- Size: 696 KB
- Stars: 8
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# codelabs-react
A bring-your-own-styles React library, that turns [Google-style codelabs](https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md) into React components for easy customization.
You'll need to get the API response from the Google APIs yourself. This project does not handle authentication to the Google APIs. Check out [this guide](https://developers.google.com/docs/api/quickstart/js) if you need help with it.
**Live demo:**
- [With the default components](https://codelabs-react.netlify.app/?path=/story/codelabs-example--default)
- [With overrides using Base Web](https://codelabs-react.netlify.app/?path=/story/codelabs-example--base-web)
## API
```js
import { Codelabs } from "codelabs-react";
/*
source: the JSON output of the Google Docs API
overrides: providing your own set of render functions or component overrides
*/
{}}
// optional, if you want to set the initial page to show
initialPage={Number}
// optional, if you want to use iframes, you have to define the allowed base URLs, like 'google.com'
iframeSourceUrls={[String]}
// optional, used for styling
overrides={{
// Layout overrides
Header: ({ title }) => React.Component,
Content: ({ children }) => React.Component,
SideNavigation: ({ items, setPage, currentPage, onPageChange }) =>
React.Component,
Button: ({ children }) => React.Component,
// Text overrides
Paragraph: ({ children }) => React.Component,
H1: ({ children }) => React.Component,
H2: ({ children }) => React.Component,
H3: ({ children }) => React.Component,
H4: ({ children }) => React.Component,
H5: ({ children }) => React.Component,
H6: ({ children }) => React.Component,
Paragraph: ({ children }) => React.Component,
ListItem: ({ children }) => React.Component,
// Info and warning boxes
InfoBox: ({ children }) => React.Component,
WarningBox: ({ children }) => React.Component,
// Link overrides
ButtonLink: ({ children, href }) => React.Component,
Link: ({ children, href }) => React.Component,
// Code containers
// Snippet: single-line
// Box: multi-line
Snippet: ({ children }) => React.Component,
CodeBox: ({ children }) => React.Component,
// image / video components
Img: ({ src }) => React.Component,
IFrame: ({ src }) => React.Component,
}}
/>;
```
## Roadmap
Currently, the following features are missing, and will be added in the future:
- [x] Image support
- [x] YouTube support
- [ ] Per-step time estimation
- [ ] Feedback links