Skapa React-komponent för listor med emojis

Jag håller just nu på att göra den här sajten lite mer lekfull.

En idé jag fick var att skapa en React-komponent för att skapa listor, alltså ul, ol och li med emojis istället för bullets och siffror. Tanken är att kunna använda den här komponenten i de *.mdx artiklar jag skriver.

Slutresultatet ser ut såhär:

• 🎉 Så här kan det se ut!
• 🤯 Det kan även se ut såhär
• 🚀 Eller såhär?

Men hur gjorde jag då? Jo det ska jag ta och berätta.

Disclaimer: I exemplen under används stitches som CSS-in-JS bibliotek men css:en är ändå typ densamma, bara att det skrivs med object-syntax. Tittar man bara på syntaxen så ser man hur det skulle skrivas med vanlig css.

Först skapade jag själva EmojiList komponenten som kan agera ul eller ol:

1
interface EmojiListProps {
2
  as: 'ul' | 'ol';
3
  children: React.ReactNode
4
}
5

6
export const EmojiList = ({ as: Component, children }: EmojiListProps) => {
7
  return <Component>{children}</Component>;
8
};

Därefter skapade jag den komponent som ska agera <li /> elementet. Här nedan är koden för den komponenten, så går vi igenom vad som händer efteråt.

1
interface EmojiListItemProps {
2
  emoji: string;
3
  children: React.ReactNode;
4
}
5

6
const StyledListItem = styled('li', {
7
  listStyle: 'none',
8
  paddingInlineStart: '0',
9

10
  '&::before': {
11
    content: 'attr(data-emoji)',
12
    paddingRight: '8px',
13
    fontSize: '1.2em',
14
  },
15
});
16

17
const EmojiListItem = ({ emoji, children }: EmojiListItemProps) => {
18
  return <StyledListItem data-emoji={emoji}>{children}</StyledListItem>;
19
};

Jag har highlight:at några intressanta rader:

1. listStyle: 'none' tar bort default list style.
2. content: 'attr(data-emoji)' är den rad som egentligen får det hela att fungera.
   • Här används css attr() attributet för att kan hämta ett visst attribut från elementet.
3. data-emoji tar emot emoji prop och sätter den som data-attribut. Det är det här attributet som css regeln ovan fångar upp.
   • Elemetet renderas typ såhär: <li data-emoji="🤯">Mind blown</li>

För att det ska bli så enkelt som möjligt att använda de här två komponenterna tillsammans i mdx-filerna så exporteras dom tillsammans på följande vis:

1
export const EmojiList = () => {
2
  // Kod bortplockad från exemplet
3
}
4
const EmojiListItem = () => {
5
  // Kod bortplockad från exemplet
6

7
}
8
EmojiList.Item = EmojiListItem;

Den typen av export gör att det går att använda enklare i *.mdx filer i och med att endast en komponent faktiskt behöver importeras, nämligen EmojiList. EmojiListItem får man på köpet via <EmojiListItem />

Slutresultatet som visades i början på denna artikel ser ut såhär:

1
<EmojiList as="ul">
2
  <EmojiListItem emoji="🎉">Så här kan det se ut!</EmojiListItem>
3
  <EmojiListItem emoji="🤯">Det kan även se ut såhär</EmojiListItem>
4
  <EmojiListItem emoji="🚀">Eller **såhär?**</EmojiListItem>
5
</EmojiList>

Var det superkomplicerat? Nej. Var det revolutionerande? Knappast. Men syftet med den här sajten är delvis att jag ska ha en lättillgänglig yta att experimentera på och de här två komponenterna fyller det syftet.