Skip to content

alexkrolick/react-design-tools

Repository files navigation

react-design-tools

Tools for making pixel-perfect designs with React

Demo

Edit 6vr85vjq1k

screenshot

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

About

Tools for making pixel-perfect designs with React

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published