Rendering React Components with HTML content?

[ManuSevenval]

Hi! I am... : reporting a bug or issue

I've was testing 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 css?

Expected behavior: It should render a default react component with html elements.

Observed behavior: Could not find renderer for type 'span' flexToSketchJSON

How to reproduce: Try to render following Artboard:

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());
}

Sketch version: 43.2

[mathieudutour]

the same way this would fail on react-native, it's unlikely to be supported by react-sketchapp

[zaqqaz]

FYI:

1. http://airbnb.io/react-sketchapp/docs/FAQ.html#view--text-where-are-the-shapes-talk-to-me-about-your-api-decisions
2. http://airbnb.io/react-sketchapp/docs/guides/universal-rendering.html

[jemgold]

I wrote this up late last night - hope it helps

---

so the essence is that react-sketchapp components are very similar to react-native components — <View>, <Text> etc, rather than <h1>, <p>. it's up to you how you choose to connect the dots across platforms, but here are some suggestions

react-primitives is a library that wraps react-dom, react-native & react-sketchapp components - it figures out what platform it's being rendered on and picks the appropriate component, so you can write universal components. it's rad, but you don't have to use it.

• if you're already using react-primitives for your components, everything works for free

• if you're using React Native for components, do some messing with webpack aliases to turn import { View } from 'react-native' to import { View } from 'react-sketchapp' in your sketch document;

• use a codemod to refactor react-native to react-primitives. you could also refactor from react-native to react-sketchapp with the same method, but then the components wouldn't be universal

• ~we haven't got StyledComponents running yet but it might provide another convenient abstraction in which we could do a switcheroo.~ as of 6/15/17 we have a styled-components example :)

• if you are using React DOM (h1, div, span etc) then some more thinking is required 🤔 . This is honestly probably the most likely scenario due to the popularity of React DOM over React Native - saved til last because it's the most complex. we'll figure it out eventually.

• • *

It might be possible to write a translator that turns <h1> etc into <View>, but that's 1) more ambitious than I wanted to be, 2) applicable beyond react-sketchapp — it would also be useful for users of react-native, react-primitives, react-native-web etc etc

[jemgold]

I'm going to close this for now — will refer to it in the future if we figure out a good solution for rendering DOM components :)