this repo has no description
Time to embrace prefers-reduced-motion with picture
+15
-11
+14
-10
src/components/emoji-text.jsx
+14
-10
src/components/emoji-text.jsx
···
9
9
const elements = text.split(regex).map((word) => {
10
10
const emoji = emojis.find((e) => e.shortcode === word);
11
11
if (emoji) {
12
+
const { url, staticUrl } = emoji;
12
13
return (
13
-
<img
14
-
key={word}
15
-
src={emoji.url}
16
-
alt={word}
17
-
class="shortcode-emoji emoji"
18
-
width="12"
19
-
height="12"
20
-
loading="lazy"
21
-
decoding="async"
22
-
/>
14
+
<picture>
15
+
<source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
16
+
<img
17
+
key={word}
18
+
src={url}
19
+
alt={word}
20
+
class="shortcode-emoji emoji"
21
+
width="12"
22
+
height="12"
23
+
loading="lazy"
24
+
decoding="async"
25
+
/>
26
+
</picture>
23
27
);
24
28
}
25
29
return word;
+1
-1
src/utils/emojify-text.js
+1
-1
src/utils/emojify-text.js
···
8
8
const { shortcode, staticUrl, url } = emoji;
9
9
text = text.replace(
10
10
new RegExp(`:${shortcode}:`, 'g'),
11
-
`<img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" />`,
11
+
`<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" /></picture>`,
12
12
);
13
13
});
14
14
// console.log(text, emojis);