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

import designImgUrl from "./design.png"

// 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>

License

MIT