ts-react-codepen-embed


React component for embedding pens from Codepen.io, with responsive height and ability to embed multiple pens in the same page this time

TL;DR

This is a fork of shettypuneeth/react-codepen-embed, which is a great library to embed our Codepen project as a Component in our React app.

However, I need the following few features as well so I had decided to work on top of the above:
- [ ] Responsive Height for the embedded pens
- So that the height is proportional to the window width and, in my humble opinion, looks better
- [x] Allowing the embedding of multiple pens without firing the Codepen scripts multiple times
- Otherwise some of the scripts would fail and refuse to render
- [x] Migrate the source to TypeScript
- Personal preference but I think TypeScript rules :-)
- [ ] Added automated tests coverage
- Let me Google that for you: automated tests importance
- [ ] Reinventing the wheel

Installation

``bash
#using npm cli
npm install --save ts-react-codepen-embed

#using yarn
yarn add ts-react-codepen-embed
`

Usage

`javascript
import React from "react";
import Codepen from "ts-react-codepen-embed";

const CodepenEmbedded = () => {
return ;
};
`

Component Props

| Property | Type | Required | Default | Description |
| ---------------- | --------- | -------- | ------------ | -------------------------------------------------------------- |
| hash | string | true | | Id of the pen to embed |
| user | string | true | | Codepen username |
| height | number | false | 300 | Height of the pen |
| loader | element | false | | Loader to render while the pen is being embedded or errors out |
| defaultTab | string | false | css,result | Default tab to display |
| themeId | string | false | dark | Theme for the pen |
| preview | boolean | false | true | Make the preview "Click-to-Load" |
| title | string | false | | Title of the pen |
| shouldLoadScript | boolean | false | true | To load the codepen embed script or not |
| overrideAsLoaded | boolean | false | | To override the loaded state |

API

#### Props.loader

Compenent to render when the pen is being embedded or when it errors.

`js
hash="JyxeVP"
user="shettypuneeth"
loader={() =>

The loader component will receive a `isLoading` prop when it is, obviously, loading

`js
const Loading = props => {
if (props.isLoading) {
return

If the embed fails then the loader component will receive an `error` prop

`js
const Loading = props => {
if (props.error) {
return

Acknowledgement

This repository is forked from shettypuneeth/react-codepen-embed so kudos to shettypuneeth. :)