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 -
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
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
propsobject will look like. We will define the interfaces in a separate file for better clarity.
Then the component itself.
memoto 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
Codecomponent. 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
Pay attention to the exception that we
throw. We did that because in the absence of
src, our component will not work properly.
Also, the import of the
SnippetPropsinterface 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 developmentapproach. After all,
TypeScriptis similar to one big test which checks our codebase in real time during compilation.
articleyou can read more about
5. Implementing StaticSnippet component
This one will just render code snippet passed as
As before, we added implementation to the prepared model. In this case we just wrapped our
SnippetContentcomponent. 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
7. Creating DynamicSnippet component
We'll use presentation from
SnippetContentand 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 -
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 ourLinkedin.
created: 2 months ago
updated: 2 months ago