React Scenes v2 🌉
React Scenes is a simple way to create/test your react components inside your app.
Live demo at https://react-scenes.doub.co
Why?
We tried lots of tools to simplify our in-house react component creation process, most of the tools either has separate build process or not enough feature set. React Scenes is more simple, easy to use, flexible and does not need a separate build process, it is plug and play.
Installation
npm install react-scenes --save
Usage
Scenes
Libraries is just a react component that uses Scenes
, you can point any route to any library just like normal pages.
; ; let scenes = Object; { return <Scenes title="My Library" config= caching: true scenes=scenes /> ; }
string
title Library Title.
array
scenes Scenes.
object
config boolean
caching This is the default state of caching, can be enable/disable from UI.
array
actions check for more: custom actions
array
panels check for more: custom panels
array
devices check for more: custom devices
Scene
Example scene
; title: "Hello" target: Bar // or as function ({ props, state, setState }) => {} controllers: key: "title" title: "My title" controller: controllerstext"hello" events: "onClick" options: centered: true bg: "light" // light, dark, white, black docs: `## Bar **Hello World** `;
string
required
title Title of your component.
You can also make titles nested like Buttons>Normal.
React Component or function
required
target Your Component. You can either give your component directly or you can pass a functions.
target: ({props, state, setState, pushEvent}) => {
return (
<div>
<Button {...props}>{props.title}</Button>
</div>
)}
array
controllers All the controllers your component need. They will be passed to your component as their props.
array
events Events you want to track.
object
options Two options are available.
theme
andcentered
(makes component centered in viewport with flexbox).
string
docs Component documentation or notes.
Built-in Features
Panels
We provide 4 panels; You can also add custom panels check for more: custom panels Every panel can has its own specific actions check for more: custom panel actions
Scenes 🗂
All scenes you have will appear in here.
Controllers 🎚
Conrollers are your main tools to alter your component without direct input.
We provide 10 default controllers; text
,textarea
,select
,boolean
,integer
,float
,range
,object
,array
,color
text
controllers.text("Hello World")
textarea
controllers.textarea("Hello \n World")
select
controllers.select("primary", ["primary", "destructive"])
or you can add as key,value
controllers.select("primary", [
{key:"Primary, value:"primary"},
{key:"Positive, value:"positive"}
])
boolean
controllers.boolean(true, true)
> if you set second argument it will includenull
to controller cycle.
integer
controllers.integer(42)
float
controllers.float(42.1)
range
controllers.range(42.1)
object
controllers.object({foo:"bar"})
array
controllers.array([1,2,3])
color
controllers.color("#000","hex" // hex, rgb, rgba)
Events 🚀
Track your components events, just add event props to your scenes as an array.
Code 📤
This converts your components code to string for easy sharing.
Docs 📓
Docs are can be component documentation or any other notes. (markdown supported).
Customize
Custom Panels
We exposed all props internally so you can access to alter anything you like.
<Scenes ... panels= _id: "my-apples" component: MyApples panel == "my-panel" icon: "🍎" actions: _id: "toggle-apple-color" optionsapple == "green" ? "🍏" : "🍎" optionsapple == "green" { ; } />
Custom Controllers
Example: myApp/.../myCustomController.js
; { return type: "customController" initialValue val { return <div className="custom-controller"> <input value=value onChange= onFocus= onBlur= /> focused ? "Focused" : "Not Focused" </div> ; } ;};
There is 4 props you can use;
-
type
string
is just and identifier. -
initialValue
anything
is the initial value of the input. -
process
function
can be use to alter the input value. -
input
function
hasvalue
,set
,title
,state
,setState
to update your data and state of your controller.
Usage
Example: someScene.js
import customController from "../myCustomController";
export default {
title: "Hello",
target: Bar,
controllers: [
{
key: "data",
title: "My Data",
controller: customController("hello", "foo", "bar")
}
]
};
Custom Devices
to add custom device sizes, inject it to Scenes
like below.
<Scenes ... devices= iphonex: title: "iPhone X" width: 375 height: 812 iphoneflex: title: "iPhone Flex" width: "375px" height: "100%" unit: "" />
Contribute
Pull requests are welcome and please submit bugs 🐛.
Contact
- Follow @doubco on Twitter
- Follow @doubco on Facebook
- Follow @doubco on Instagram
- Email mailto:hi@doub.co