ronilan/react-codepen-prefill

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

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.

Authors

Ron Ilan

License

MIT

Fabriqué au Canada : Made in Canada