React-codepen-prefill NPM

react-codepen-prefill

React component to create a button/link to prefill Codepen.io with supplied code.

Installation

npm install --save react-codepen-prefill

Usage

import React from 'react';
import CodepenPrefill from 'react-codepen-prefill';

...

  <CodepenPrefill
    label="Hello World"
    className="simple-link"
    target="_blank"
    title="CodepenPrefill Example"
    description="An example of the CodepenPrefill Component in action."
    js="console.log('hello world')"
    css="body{color: blue;}"
    html="<h1>Hello World</h1>"
    editors="111"
  />

For more examples: https://ronilan.github.io/react-codepen-prefill/

Component Props

Internal

Property	Type	Required	Default	Description
label	`string`	`false`	''	The text on the button/link
className	`string`	`false`	''	The css class for the button/link
target	`string`	`false`	''	HTML target attribute

Passed to prefill a CodePen

Property	Type	Required	Default	Description
title	`string`	`false`	''	The title of the pen.
description	`string`	`false`	''	The description of the pen.
tags	`array`	`false`	[]	An array of strings to act as tags.
editors	`string`	`false`	'111'	Which editors are open. 1 is open. order is: HTML, CSS, JS.
layout	`string`	`false`	'left'	Optional layouts: top, left, right
html	`string`	`false`	''	The HTML code to fill in the HTML pane.
htmlPreProcessor	`string`	`false`	'none'	Optional values: "none", "slim", "haml", "markdown"
css	`string`	`false`	''	The CSS code to fill in the CSS pane.
cssPreProcessor	`string`	`false`	'none'	Optional values: "none", "less", "scss", "sass", "stylus"
cssStarter	`string`	`false`	'neither'	Optional values: "normalize", "reset", "neither",
cssPrefix	`string`	`false`	'neither'	Optional values: "autoprefixer", "prefixfree", "neither"
js	`string`	`false`	''	The JavaScript code to fill in the JS pane.
jsPreProcessor	`string`	`false`	'none'	Optional values: "none", "coffeescript", "babel", "livescript", "typescript"
htmlClasses	`string`	`false`	''	CSS class to apply to html tag.
head	`string`	`false`	''	Content to include inside the HTML head tag.
cssExternal	`string`	`false`	''	Use semi-colon to separate multiple files.
jsExternal	`string`	`false`	''	Use semi-colon to separate multiple files.
private	`boolean`	`false`	`false`	Optional values: true, false - When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as public
parent	`number`	`false`	`null`	If supplied, the Pen will save as a fork of this id. Note it's not the slug, but ID. You can find the ID of a Pen with `window.CP.pen.id` in the browser console.