5 Github Elements you have to try
Tags: webdev, javascript, html, beginners
Published: 2021-04-12 19:23:45






## Contents

1.  [Intro](#intro)
2.  [Time Elements](#time)
3.  [Image Cropping Element](#crop)
4.  [File Attachment Element](#files)
5.  [Copy Element](#copy)
6.  [Text Expander Element](#text)
7.  [Summary](#summary)

## Intro <a name="intro"></a>

I'm a big fan of [web components](https://css-tricks.com/an-introduction-to-web-components/). Reusable web elements that can work anywhere.

A [friend](https://twitter.com/43081j) showed me this awesome set of components from Github.
I can't believe that I hadn't come across them before so I thought I'd share a few of the best ones with you!

These all work across all modern browsers, and browser support is documented.
They have virtually no dependencies either so they will be blazing fast, unlike other solutions to some of these problems.
More importantly they are battle tested as they are the elements Github uses itself!!

TLDR; [Checkout the repository](https://github.com/github/github-elements)

## Time Elements <a name="time"></a>

Displaying Times can be hard! Figuring out how long ago something was to display in a human friendly format, or how long it is until an event.

Github have solved this for you, all with 0 dependencies!!

These are the same components you will have seen on Github itself where it displays times for example:

![Github Time Element](/images/5-github-elements-you-have-to-try.webp "Github Time Elements")

This is really handy for any project when you need to display the time, you also know its tried and tested with it used themselves.

There are a [few different types of time display available](https://github.com/github/time-elements).
They even have a [demo page](https://github.github.io/time-elements/examples/) available too!

## Image Cropping Element <a name="crop"></a>

Image cropping can be a nightmare, and getting a library that handles it also can be difficult to setup and use. Github to the rescue!

[Repository](https://github.com/github/image-crop-element)
[Demo Page](https://github.github.io/image-crop-element/examples/)

This is really cool, especially the various ways Github advise you can use this, including automatically updating the values in inputs which you can send off to the server.

And again, it has no dependencies so will be super fast!

## File Attachment Element <a name="files"></a>

File uploads, I'm pretty certain everyone will have had to develop one of these in their career! Well now it's just an element away.

[Repository](https://github.com/github/file-attachment-element)
[Demo Page](https://github.github.com/file-attachment-element/examples/)

## Copy Element <a name="copy"></a>

With the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) it's now fairly easy to write some logic to copy out some text to the users clipboard. But Github does this and one better by letting you bind to elements and there values for example, copying out a URL from a link.

```html
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
```

Couldn't be easier!

[Repository](https://github.com/github/clipboard-copy-element)
[Demo Page](https://github.github.com/clipboard-copy-element/examples/)

## Text Expander Element <a name="text"></a>

Ever wondered how Github looks up users or issues as you type? Wonder no more as you can do it exactly like they do with another really simple element!
This would be super useful for anyone building social sites for example.

[Repository](https://github.com/github/text-expander-element)
[Demo Page](https://github.github.com/text-expander-element/examples/)

## Summary <a name="summary"></a>

Github have done amazing work here, and I cannot thank the engineers who wrote them enough.
I've already started using these elements in projects I work on, and it has saved me plenty of time already!

There are lots more elements to take a look at so check the [whole repository and examples here](https://github.com/github/github-elements).

<a href="https://twitter.com/JordanFinners" target="_blank" rel="me noopener noreferrer">Let me know</a> which are your favorites!

Happy Building!