TLDR; Yes ✅. With some ?? and bit of ?we made it possible in Stratos alpha version 2.
Even though the React-code generated by Stratos was working fine we felt the need to “bundle” the components together, because everything can always be improved right? Current Stratos alpha 1 Sketch setup and results looks like this:
The Sketch-elements above combined creates one card. Shouldn’t they be one React-component? We felt they somehow should… Symbols in Sketch are re-usable entities. What else are re-usable entities? React components! Would it be possible to create Symbols in Sketch that had a React-component counterpart? At first it seemed impossible ️️?️♂️, but hey that hasn’t stopped us before ?♂️ After what felt like a gazillion attempts, we finally managed to do it!
This the current end-result. I say “current” since everything can always be improved ?
This creates one additional React component — ExampleCard1. In the ExampleCard1 Sketch symbol we have added a {ComponentContent} element. This tells Stratos which elements are child-components to ExampleCard1 and where to insert them.
Stratos now generates the following:
And now our Start-component is reduced into this:
These are results of initial test and we are currently testing things like nested symbols and overrides ??
Oh, and while you’re reading: We’ll probably remove the green stuff (comments) from the generated code… and also most likely make functional components instead of classes.
Thanks for reading!
//Fredrik — Team Sketch2React