React code snippet component
11m
Intro
We will create a component to display code snippets and ASCII arts during loading to improve UX.
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?
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.
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
.created: 2 months ago
updated: 2 months ago