react-design-tools

Tools for making pixel-perfect designs with React

Usage no npm install needed!

<script type="module">
  import reactDesignTools from 'https://cdn.skypack.dev/react-design-tools';
</script>

README

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