The embeded link is broken

react-codepen-embed

React component for embedding pens from Codepen.io

Installation

#using npm cli
npm install --save react-codepen-embed

#using yarn
yarn add react-codepen-embed

Usage

import React from "react";
import Codepen from "react-codepen-embed";

const CodepenEmbedded = () => {
  return <Codepen hash="JyxeVP" user="shettypuneeth" />;
};

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.

<Codepen
  hash="JyxeVP"
  user="shettypuneeth"
  loader={() => <div>Loading...</div>}
/>

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

const Loading = props => {
  if (props.error) {
    return <div>Error</div>;
  }
  return <div>Loading...</div>;
};

	ReactCodepen.defaultProps = {
	defaultTab: 'css,result',
	height: 300,
	preview: true,
	editable: false,
	themeId: 'dark',
	version: 2,
	};

shettypuneeth / react-codepen-embed Goto Github PK

react-codepen-embed's Introduction

react-codepen-embed

Installation

Usage

Component Props

API

Props.loader

react-codepen-embed's People

Contributors

Stargazers

Watchers

Forkers

react-codepen-embed's Issues

Description

The root of the problem:

Links to React PR and ESLint change:

Recommend Projects

Recommend Topics

Recommend Org

`Props.loader`