Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "React Live" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to install React Live to be able to interact with code snippets, and explains that it is one of the essential features when building a documentation page or a docs theme.

Get Unlimited Access Now

Transcript from the "React Live" Lesson

[00:00:00]
>> Jason Lengstorf: Next thing that we want to do is we've got syntax highlighting working, but a really advanced feature of React and something that we can do with MDX is we can make our syntax highlighted blocks, show a preview and then not only show a preview, but make that preview editable.

[00:00:17] So if we wanted to say build a component library and show off a button. We wanna be able to edit that button in place and see the result right there. It's a really good way, if you're writing documentation to let people try out and experience the way that the API of something works without having to set up the boiler plate for it.

[00:00:35] So this is a really nice feature and fortunately the team at Formidable Labs has all ready done a bunch of work on this. So we're gonna be using something called react live. So to do that we can just jump right in to our code and say yarn workspace gatsby-theme-docs.

[00:00:55] We're gonna add react-live, and it comes with all the things that we need so we don't have to add any additional dependencies there. Now that we've got react live, we can use it and we just grab it in. Right at the bottom here, we're going to get the live provider.

[00:01:14] So react live uses context and we're going to access that context to get our stuff and we access that through a few sub components, the live editor, which is where people will be able to edit the code. A live error in case the code is not valid and a life preview where we can see the results and that will be imported from react live.

[00:01:39] And the other thing that we're going to need is a scope. So react live will allow us to use different components in the scope. And that way we don't have to import them anytime that we use them and that makes it really handy again if we're showing off a component library.

[00:01:56] People shouldn't have to know how the library is set up we should just be able to say hey, try adding a button and then when they add the button component it just works they shouldn't have to import button or anything. So to do that we can import a scope or we can define just an empty object and add things to it is needed, because this is a theme and because we want people to be able to easily modify this.

[00:02:19] What we're gonna do is take a page out of Gatsby plugin theme new eyes book and we're gonna create a scope file at the source root. And that way it'll be easy to override, easy to add in your own components to the scope for live editing. So to do that, we'll just jump right into this source folder.

[00:02:38] And I'm gonna create a file called scope.js and it lives right at source root. So source.scope.js. And inside of it, we're just gonna export an empty object because by default we don't have anything in scope. We're not gonna have custom components coming out of our theme. But then over here, we're gonna import that scope and we'll get it from scope.

[00:03:10] And then to implement this, what's nice is we've all ready got most of what we need with the code string. So we can just check whether or not the field supports react live. And we wanna make this optional, right? So we don't want every syntax highlighted block, to become a live editable one cuz that will break.

[00:03:31] A lot of syntax highlighted blocks are showing partial code, incomplete code, pseudo code, things where the imports aren't actually defined and that would be chaos if we were to just unleash that, always trying to live edit. So we're gonna make this configured by a attribute. And the way that we'll do that is that we're going to check if code props has a react live attribute on it, and if so, we're gonna return a different set of code and by default then, it'll use the prism.

[00:04:06] So we've got three potential outcomes, if there's no language specified we just use a regular old pre tag and output, a pre tag with whatever props were supplied. If it's not marked with react live, we're gonna output the prism react render. If it is marked with react live, we're gonna set up our live provider.

[00:04:30] And inside of it, we're gonna use the code of code string. We're gonna set the scope and that's our scope doc which as we have currently defined it, it's an empty object. And then we're gonna set a theme and we get to use the same theme as the one that we're using in prism react render which is really handy because we don't have to change things.

[00:04:52] We just import one theme and it just works. So then we don't have to do much with these because we're putting all of that stuff into the provider. That means that the code string, and the scope, and all of that is available via context, which means that we can just drop in the rest of these without having to make a bunch of edits or pass those probs multiple times.

[00:05:18] On the LivePreview, I wanna add a little bit of styling. So let's add that in. What I wanna do is, just because the preview by default is gonna be just kind of smashed against the bottom of the CodeBlock. So I wanna put a border around it and will just do a little bit extra and give us some pattern.

[00:05:39] So let's start our border and this is gonna access the theme object. Do one pixel solid and we will set it up to be theme.colors.muted. Also we gonna give it padding of four and in a lot of cases, you'll have like a paragraph or a h1 or something like that and that'll have a lot of top margin that will look a little goofy.

[00:06:08] So I'm just gonna target any first-child inside of our preview and just set the margin top to zero. And finally, to make this easy to target if, if someone wants to override it via theme ui, we're going to set a variant, and we'll just call it react live.

[00:06:28] So now it's targetable in theme ui without having to mess with this particular component. So that is actually all that's required to get this running. So to test it out, let's start the server. So we'll do yarn workspace theme-dev develop.
>> Jason Lengstorf: And we'll just check at the beginning that it didn't break anything.

[00:07:02]
>> Jason Lengstorf: Okay, successful. Okay. And it's working. We've got our syntax highlighted blog, we've got our plain old blog, and now I want to add a live edited blog. So let's jump in here and we're gonna open up the theme dev docs index again, and I'm gonna drop in some JSX and I want to market as react live.

[00:07:32] So this is going to be our live editor. And to make things simple, I'm just going to export a component that component is gonna have a divinate. We will add an h2. We'll say, a button and then let's also add that button. We'll give it an on click handler and because we're not writing a real button, we'll just make sure it tells us that something happened when you click it.

[00:08:08]
>> Jason Lengstorf: Okay, so we've got our button. We have exploited some jsx from our react live and so what should happen is when I flip over to the page, we should be looking at not only a syntax highlighted block with this code in it, but also a working preview so let's give it a shot.

[00:08:26]
>> Jason Lengstorf: Hey, look at that. And now if I want to edit it,
>> Jason Lengstorf: We can make those edits in real-time and they just work. So this is an extremely powerful way for us to tap into the interactivity of a page. And because we put this in a theme, it's going to just work when you install this on a site.

[00:08:49] So anyone who wants to use this theme will be able to add that react live attribute to their code blocks, and get a live preview, editable live preview. So, with that being said, I think we're good to call our theme finished. So let's add everything, check where we are.

[00:09:11] So we added the React live dependency, set up the code component to use it set up scope so that we can easily shadow what components are available in React live and then modified index.mdx to use it. So let's commit that change.
>> Jason Lengstorf: Add live editing support. Okay, we'll push that up.