https://github.com/shettypuneeth/react-codepen-embed
React component to embed pens from Codepen
https://github.com/shettypuneeth/react-codepen-embed
codepen embedded reactjs
Last synced: 11 months ago
JSON representation
React component to embed pens from Codepen
- Host: GitHub
- URL: https://github.com/shettypuneeth/react-codepen-embed
- Owner: shettypuneeth
- Created: 2017-10-22T17:14:56.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-29T19:23:23.000Z (over 2 years ago)
- Last Synced: 2024-09-19T12:07:49.042Z (over 1 year ago)
- Topics: codepen, embedded, reactjs
- Language: JavaScript
- Homepage:
- Size: 399 KB
- Stars: 30
- Watchers: 2
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-codepen-embed
React component for embedding pens from [`Codepen.io`](https://codepen.io)
## Installation
```bash
#using npm cli
npm install --save react-codepen-embed
#using yarn
yarn add react-codepen-embed
```
## Usage
```javascript
import React from "react";
import Codepen from "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" |
| editable | `boolean` | `false` | `false` | Can edit code |
| title | `string` | `false` | | Title of the pen |
## API
#### `Props.loader`
Compenent to render when the pen is being embedded or when it errors.
```js
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...;
};
```