react-design-tools
Tools for making pixel-perfect designs with React
Demo
Using
PaletteLookup
const colors = primary: "#336699" secondary: "#cccccc" skyBlue: "#3399cc" <PaletteLookup palette=colors />
See this gist for a way to parse SCSS variables into ES modules.
DiffTool
// dimensions, currently required (may be able to extract them in a future release)const w = 500;const h = 250; <DiffTool imgUrl=designImgUrl imgHeight=h imgWidth=w> <MyComponent /></Difftool>