# Sketch Redraw

> In case you're here and don't know Sketch, take a look at
> [`sketch` package](https://hexdocs.pm/sketch)!

> This readme is a carbon-copy of the Sketch Redraw section in `sketch` readme.

## Setup

When you're using Redraw, `sketch_redraw` covers you. `sketch_redraw` exposes
one entrypoint, `sketch/redraw`, containing everything needed to get started.

```gleam
// main.gleam
import redraw
import sketch
import sketch/redraw as sketch_redraw

pub fn main() {
  let root = client.create_root("root")
  client.render(root, redraw.strict_mode([
    // Initialise the cache. Sketch Redraw handles the details for you.
    sr.provider([
      // Here comes your components!
    ])
  ]))
}
```

## Usage

`sketch_redraw` exposes one module to help you build your site, similarly to
redraw: `sketch/redraw/html`. `html` is simply a supercharged component,
accepting a `sketch.Class` as first argument, and applies that style to the
node. Because it's a simple component, `sketch/redraw/html` and `redraw/html`
can be mixed in the same code without issue! Because of that property,
`sketch_redraw` _does not_ expose `text` and `none` function at that time.

```gleam
import redraw/html as h
import sketch
import sketch/redraw/html
import sketch/size.{px}

fn main_style() {
  sketch.class([
    sketch.background("red"),
    sketch.font_size(px(16)),
  ])
}

fn view(model: Int) {
  html.div(main_style(), [], [
    h.div([], [
      h.text(int.to_string(model))
    ]),
  ])
}
```

And you're done! Enjoy your Redraw app, Sketch-enhanced!

## Final notes

Sketch Redraw tries to integrate nicely with React Devtools! In case you're
seeing something weird, signal the bug!