Displaying 1 to 3 from 3 results

component-playground - A component for rendering React components with editable source and live preview

  •    Javascript

codeText takes a string of JSX markup as its value. While you can just pass it a string, I find it is easier to make a separate file and use Webpack's raw loader to load in the raw source. In the example above I use the .example extension, and an examples folder to organize my samples.

react-live - A production-focused playground for live editing React components

  •    Javascript

React Live brings you the ability to render React components and present the user with editable source code and live preview. It supports server-side rendering and comes in a tiny bundle, thanks to Bublé and a Prism.js-based editor.The library is structured modularly and lets you style its components as you wish and put them where you want.

component-playground-responsive-iframe - A responsive iframe renderer for the React component playground

  •    Javascript

The component-playground now supports custom renderers for previewing your components. Quite often, components need to be responsive to both window and local layout constraints. This component is intended to give you the opportunity to view your components in an isolated <iframe /> to see it interact with multiple layouts. This component scrapes and loads all <style /> and <link rel="stylesheet" /> components from the host page under the assumption that the styles to render the component exist in the host page and should be transferred to the iframe context as well.