Joel M. Turner

Illustration

Blog

Notes

Create an Avatar Component in Gatsby with TypeScript Part 1

This post is part of the Create an Avatar Component in Gatsby with TypeScript series

Part 1: We'll build the simple react componentPart 2: We'll start hooking up Gatsby imagePart 3: We'll type it with TypeScript

In this series we’re going to take a look at creating a simple avatar component that is typed with TypeScript and has some special goodies in Gatsby land.

I usually write TypeScript from the start but I wanted to show each piece individually in case others aren’t familiar with TypeScript yet.

Let’s start by identifying what our needs are for our avatar component.

  • Should show an image
  • Should be round
  • Should accept an image url
  • Should display an image based on name (for small sets)

Cool, now we can start building our avatar. Start with an img element using a placeholder image as src. Add a little bit of styling to make it round and give it a size.

1function Avatar(props){
2
3 const {url, altText, title} = props;
4
5 const styles = {
6 width: '75px',
7 height: '75px',
8 borderRadius: '50%'
9 }
10
11 return (
12 <img
13 style={styles}
14 src={url}
15 alt={altText}
16 title={title} />
17 );
18}
19
20export default Avatar;

Then we can pass it the image url and alt text. We can see that the component is working in its basic implementation now.

Monster P. Whittington portrait
1<Avatar
2 url="https://res.cloudinary.com/joelmturner/monster-01.png"
3 alText='Monster P. Whittington portrait'
4 title='Monster P. Whittington' />

Looks good. We’ve met our first three criteria for this component. In step 2 we’ll make it more powerful with Gatsby Image.

<-- Animated CSS Timer Icon

Discuss this article on Twitter