3

I've was testing the react-sketchapp which looks pretty neat so far. Besides rendering the default sketch elements like Text,View,Image and so on, would it be possible to render a default react component containing HTML-Markup styled with scss?

I tried rendering the following Hello-Component:

import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';

const Hello = () => (
  <View
    name={`Hello View`}
  >
    <Text name="Hello Text">
      <span>Hello World</span>
    </Text>
  </View>
);

const Document = () => (
  <Artboard
    name="Hello Board"
  >
    <Hello />
  </Artboard>
);

export default (context) => {
  render(<Document />, context.document.currentPage());
}

but I get the following error: Could not find renderer for type 'span' flexToSketchJSON

Is rendering default react components including html / css to Sketch possible?

Leland Richardson
  • 2,695
  • 2
  • 20
  • 27
Manu Schiller
  • 3,256
  • 2
  • 11
  • 13

3 Answers3

1

You can't render HTML elements to Sketch, same as you can't render HTML elements to React Native.

React is just a way of managing a tree of abstract components. How to render these components needs to be defined by the specific renderer you are using. react-sketchapp is a renderer that understands components which render to Sketch elements, but it does not understand HTML elements such as div. (and React Native includes a renderer which knows how to render React Native components to native mobile views, react-music is a renderer which knows how to render React Music components into audio, and so forth).

React, in and of itself, has nothing to do with HTML elements or the DOM. The react-dom renderer library is where the magic of rendering into the DOM happens. If you want to render HTML elements to Sketch, you'll need to write a React renderer which knows how to convert HTML elements to Sketch's file format.

Pedro Castilho
  • 10,174
  • 2
  • 28
  • 39
1

You can export any HTML/CSS to Sketch using html-sketchapp.

Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
0

It is possible.

Try looking into using React-Primitives with React-SketchApp. https://github.com/lelandrichardson/react-primitives

It's in a few examples within React-SketchApp e.g. https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives

user3500783
  • 1
  • 3
  • While the links are helpful, it would be better to copy the relevant portions here in a formatted code block. [Not everyone can access external sites, and the links may break over time.](https://stackoverflow.com/help/how-to-ask) – JonathanDavidArndt Nov 23 '17 at 03:21