React Playground Styled for Component Docs

[00:00] I'm going to start by importing React Playground Styled and I'm using [inaudible] sandbox that's going to ask me to add the dependency to the project. That's just going to load that. Because this is the default export, I can call it whatever I want to when I import it.

[00:13] I replace the placeholder text with our Playground component, and now I can set the default value to be the code that I want to render into the playground. It uses default value because this is an uncontrolled component.

[00:27] Now, you can see I've got this playground on the right and it's got a code editor here, so as I edit this, you can see that the button here is updated. Why would you want to use a Playground editor like this instead of something like Code Sandbox I/O?

[00:41] React Playground Styled is designed to be very lightweight and responsive, so you can use it to document components in the smallest space possible. As an example, let's imagine you wanted to document something like elemental UI.

[00:53] The existing documentation shows us how we can have various kinds of buttons, but when we look in the code, we can't edit it. I'll add elemental CSS to the HTML and I'm going to add some of my own CSS as well. I will import the button component from elemental and just add that dependency to the project.

[01:12] It looks like it's got a peer dependency on react transition group, so I'm just going to temporarily load that in here. Now, I can delete this line. I will change this to the Button from elemental and you can see that it doesn't recognize Button. Button is not defined.

[01:34] That's because anything I want to render in the playground, I have to parse in on the scope, which is an object. If I pass Button in on the scope, then I get an elemental button in here. Be very careful to parse in an object to the scope. It's very easy to make the mistake and not parse in just a component.

[01:57] Now, I've got this playground here and I can edit it. I could do something like type = "primary." Now, I've got a primary button in here. I'll just import styled from styled-components. I'm going to move this primary code back into here, so I just highlight that.

[02:17] I'm going to paste in some prepared code. I've put backticks around this, so then conflict with the double quotes here and I've put a wrapping div around this. One nasty thing here you can see is that now, this is line wrapping here and because I'm doing this screencast, I don't want to give too much space to this area.

[02:35] Let's have a go at trying to restyle this playground so it gives more space to the editor than it does to the preview. I'll get hold of the wrapper component for the viewer and I'm going to call this X and now I'm going to pass it through styled from styled-components.

[02:52] This allows me to augment the styles, so I'm going to change the min-width, which is normally 240 to be 150 pixels. I'm going to do the same with the editorWrapper and I'm going to change the flex from this which would normally be 1 and I'm going to change it to 2.

[03:08] Now, the editor is about double the width of the viewer. If you want to know what the default CSS for these wrappers are, it's probably easiest just to look in the Web inspector. Now, we want to document our button in several different states.

[03:21] What I could do is just take it and copy it and paste it several times, but as you can see, this is taking up a lot of space in my actual code so I'm not going to do that. Instead, I'm going to copy the code from index.js and I'm just going to paste it into a new file elemental-playground.js.

[03:38] I'll change this to experimental playground and then I'll export it as default. I'll get hold of the scope from the props and then I can spread the scope onto the scope here, then spread the rest of the props in here and I'll get rid of these divs here.

[03:59] I'm going to want to be able to use any elemental element, not just Button, so I'm going to import * as elemental from "elemental." Now, I can spread elemental onto the scope and that will make all of the components available in the playground.

[04:13] Back in index.js, I can change this import to be the elemental-playground. I can get rid of some things that we don't need anymore, and I can get rid of this, and the playground still works. Now, we'll copy and paste this a few times.

[04:33] Now, we can document our component with various different settings for its props. We'll add a title to our page and go back into the elemental-playground to style it. We can load themes from a code mirror CDN with loadTheme.

[04:51] If we want to reverse the direction of these playgrounds so that the buttons are on the right, we can do that with a playgroundWrapper and just use row-reverse on the flexbox direction.

[05:06] Some styles have a shorthand property, so if we want to change the background color of this playground, we can use backgroundColor and you can see that's got a bit darker.

[05:15] Also, to avoid as much line wrapping as possible, I've used a proportional font in the editor, but you can change this default by setting the font in here. So here now, I've got a monospace font. You can even load in Google Web Fonts if you want to. You can do that like this.

[05:33] You set the Google font to be something like Indie Flower and then you need to set the actual font below to include this font and you'd have a fallback font as well. I'll set that back to be monospace.

[05:42] Now, I'm going to try adding in a border radius. To do that, I'm going to need to take the border of the editor and I'll add some margin around the playground. I could have done that down here with the CSS margin, but this is a shorthand.

[05:58] Now, I'm getting some line wrapping I'm not really wanting in this editor, so I'm going to try and stack the editor over the button instead. I can change this from row-reverse into column-reverse.

[06:11] To recap, React Playground Styled is a responsive playground that can be configured with styled components. It's built for documenting components in the minimum space possible. You'll normally wrap it in your own component to provide sensible defaults to make it blend in with the look and feel of your style guide.