React component to embed codepen project, in typescript and with responsive height
npm install 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
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
``bash
#using npm cli
npm install --save ts-react-codepen-embed
#using yarn
yarn add ts-react-codepen-embed
`
`javascript
import React from "react";
import Codepen from "ts-react-codepen-embed";
const CodepenEmbedded = () => {
return
};
`
| Property | Type | Required | Default | Description |
| ---------------- | --------- | -------- | ------------ | -------------------------------------------------------------- |
| hash | string | true | | Id of the pen to embed |string
| user | | true | | Codepen username |number
| height | | false | 300 | Height of the pen |element
| loader | | false | | Loader to render while the pen is being embedded or errors out |string
| defaultTab | | false | css,result | Default tab to display |string
| themeId | | false | dark | Theme for the pen |boolean
| preview | | false | true | Make the preview "Click-to-Load" |string
| title | | false | | Title of the pen |boolean
| shouldLoadScript | | false | true | To load the codepen embed script or not |boolean
| overrideAsLoaded | | false | | To override the loaded state |
#### Props.loader
Compenent to render when the pen is being embedded or when it errors.
`js`
user="shettypuneeth"
loader={() => Loading...}
/>
The loader component will receive a `isLoading` prop when it is, obviously, loading
`js`
const Loading = props => {
if (props.isLoading) {
return Loading...;
}
};
If the embed fails then the loader component will receive an `error` prop
`js``
const Loading = props => {
if (props.error) {
return Error;
}
return Loading...;
};
This repository is forked from shettypuneeth/react-codepen-embed so kudos to shettypuneeth. :)