Never miss an article about web development and self-growth.

Take Part

SVG Patterns in React - Build a Twitter Wall

In my recent (yet not fully released) application, I was confronted with SVG in React. I had to use a logo and wanted to use playful SVG background patterns in React. By using SVG, I avoided to use other image formats which would add performance penalties to my application.

The article will guide you through using SVG in React. It shows you how to use plain SVG for your application and how to add SVG patterns in React for your backgrounds. It will demonstrate two alternatives for using SVG patterns in React: svg-patterns and Hero Patterns. Afterwards, you will have used both by building a simple Twitter tweet wall (source code).

SVG in React

SVG simply works in React. React works with the DOM and the DOM is not only HTML. You can use SVG in React the same way as using HTML.

In my case, I had to come up with a logo for my React platform. Bear with me that I am not talented at designing logos, so I went with the pragmatic approach and just came up with a couple of letters and a lovely semicolon. I created it in Sketch and exported it as SVG. Afterward, I could simply paste the SVG into a functional stateless component, remove a couple of unrecognized attributes and converted a few attributes (fillRule, strokeWidth) to React’s camelCase convention.

In addition, it would be possible to wrap the Logo component in a <div /> container with CSS to align it in the application.

An alternative approach is using the SVG in a src attribute in an <img /> tag. The SVG could be in a logo.svg file not as component anymore but as plain SVG. Afterward, the image could have an alt attribute for improved accessibility.

Basically that’s it for using SVG in React. You can simply extract a SVG from an application, such as Sketch and Adobe Illustrator, and paste it into your source code as standalone component or as svg source file for an HTML image tag.

React SVG Patterns: svg-patterns

I wanted to add playful SVG patterns as background in my React application, because most often I am not investing too much time when it comes to styling. SVG patterns are a simple approach to fill the monotonous white backgrounds in an application.

Personally, I ended up using svg-patterns because it doesn’t add any other dependency and is kept lightweight. Other SVG pattern libraries often add heavyweight libraries such as D3.js, but not svg-patterns.

You can install the library on the command line with npm install --save svg-patterns and get started using it in React. There are plenty of different patterns showcased on the official GitHub repository.

That’s only a rectangle with a fixed height and width which is filled with a svg pattern. But how to add these SVG patterns as background?

Use Case: React Twitter Wall

I had the use case of adding the pattern as background for a wall of Twitter tweets in React. The react-tweet-embed node package was everything that I needed to display a wall of embedded tweets by only passing identifiers of my desired tweets. You install it simply on the command line: npm install --save react-tweet-embed. The following React component shows a wall of tweets.

Now you can give your application various background patterns and put different content in it.

Alternative: React SVG with Hero Patterns

There is another alternative to the previously used svg-patterns node package. It is called Hero Patterns and doesn’t require you to install another library as dependency. Simply select your desired SVG background on the website, copy the content and paste it into an own made up CSS class.

Using Hero Patterns is an easy way to integrate SVG patterns as background without any external dependencies. But you have to keep your pattern definitions in CSS and after copy and pasting it can become messy to change them. After all, that’s the tradeoff between using the svg-pattern node package and Hero Patterns.