⭐ React code snippet component

Intro

The lightweight walkthrough about creating the "Code" component for displaying code snippets. In the meantime, the ASCII loaders will be displayed.

Prelude

Code written by programmer is like a unique signature. We can recognize the author by a few lines. Let's create our unique signature by creating a flexible component for code snippets.

1. Library choice

The most complicated part of the component will be code syntax highlighting. It is better to use a battle-tested library like prism. In our case, we will use the popular wrapper - prism-react-renderer.

The reason is simple - we can easily customize how the component works with props. Below is an example of how you can display a piece of jsx code.

The component injects the appropriate styles. We can customize the behavior and appearance to suit our needs.

2. Overwriting the theme

To override the theme we need an array in which we define styles for each element.

3. Creating Code component

We need a wrapper for our library. First, let's determine what the props object will look like. We will define the interfaces in a separate file for better clarity.

Then the component itself.

We used memo to limit rerenders. Component will update only when code snippet changes. All that's left is to overwrite the styles we don't like.

4. Creating Snippet component

This component will be responsible for retrieving the content and deciding how to pass the parameters. It will use the previously created Code component. As before, let's start with the models.

The created models will be used to implement several components. Each of them will have a different role. Let's start with the Snippet component.

Pay attention to the exception that we throw. We did that because in the absence of children and src, our component will not work properly.

Also, the import of the SnippetProps interface from another file is noteworthy. Separation of interfaces from implementations can be helpful when we want to reuse models in other components. It also changes the way how developer thinks. It is a bit like test driven development approach. After all, TypeScript is similar to one big test which checks our codebase in real time during compilation.

In this article you can read more about TDD.

5. Implementing StaticSnippet component

This one will just render code snippet passed as children.

As before, we added implementation to the prepared model. In this case we just wrapped our SnippetContent component. We did this for the sake of transparency.

6. Creating SnippetContent component

This component adds the layout, header and description if they are passed.

Next are styles. Nothing fancy here. Just some css for header and description.

7. Creating DynamicSnippet component

We'll use presentation from SnippetContent and models that we created before.

What is going on here?

• ASCII art is generated

• We're fetching snippet via src

• Code is parsed to text

• We're changing state during the retrieval of the snippet

• When state is pending we return ASCII art instead of code

8. Generating ASCII art

We need to add some dummy characters when there are more lines in code snippet than in ASCII art to prevent content size change.

Also, when our snippet is smaller than height of ASCII art, we need to remove some lines from graphic. Reason is the same - user experience.

9. Usage

Just pass correct props and you can customize what you need.

Summary

Right now you're able to render the code in a cool and fancy way. We've checked how separation of models can be useful to share type definitions between different files.

Maybe there is a place for improvements. Feel free to try and remember to share results on our Linkedin.