
Security News
Open Source Maintainers Demand Ability to Block Copilot-Generated Issues and PRs
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
codelabs-react
Advanced tools
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.
A bring-your-own-styles React library, that turns Google-style codelabs 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 if you need help with it.
Live demo:
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
*/
<Codelabs
// required, full API response from https://docs.googleapis.com/v1/documents/{documentId}
// has a shape like: {title, body : {content}, inlineObjects}
content={content}
// optional, if your app needs to know about a page change
onPageChange={({ nextPage }) => {}}
// 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,
}}
/>;
Currently, the following features are missing, and will be added in the future:
FAQs
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.
The npm package codelabs-react receives a total of 3 weekly downloads. As such, codelabs-react popularity was classified as not popular.
We found that codelabs-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.