Skip to content

Commit d45d811

Browse files
ryanchu-cpunygardk
authored andcommitted
add threads support
1 parent 0f0d545 commit d45d811

File tree

7 files changed

+66
-0
lines changed

7 files changed

+66
-0
lines changed

.changeset/strong-hats-act.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"react-share": minor
3+
---
4+
5+
Added `ThreadsShareButton` and `ThreadsIcon`.

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ npm install react-share
4040
- Hatena
4141
- Gab
4242
- email
43+
- Threads
4344
- share counts for
4445
- Facebook
4546
- Pinterest
@@ -90,6 +91,7 @@ import {
9091
PocketShareButton,
9192
RedditShareButton,
9293
TelegramShareButton,
94+
ThreadsShareButton,
9395
TumblrShareButton,
9496
TwitterShareButton,
9597
ViberShareButton,
@@ -118,6 +120,7 @@ import {
118120
| PocketShareButton | - | **`title`** (string): Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead. |
119121
| RedditShareButton | - | **`title`** (string): Title of the shared page |
120122
| TelegramShareButton | - | **`title`** (string): Title of the shared page<br/> |
123+
| ThreadsShareButton | - | **`title`** (string): Title of the shared page<br> **`url`**: (string)<br/> |
121124
| TumblrShareButton | - | **`title`** (string): Title of the shared page<br/>**`tags`**: (`Array<string>`)<br/>**`caption`** (string): Description of the shared page<br/>**`posttype`** (string, default=`link`) |
122125
| TwitterShareButton | - | **`title`** (string): Title of the shared page<br/>**`url`**: (string)<br/>**`hashtags`** (array): Hashtags<br/>**`related`** (array): Accounts to recommend following |
123126
| ViberShareButton | - | **`title`** (string): Title of the shared page<br/>**`separator`** (string), default=`" "`: Separates title from the url |
@@ -178,6 +181,7 @@ import {
178181
PocketIcon,
179182
RedditIcon,
180183
TelegramIcon,
184+
ThreadsIcon,
181185
TumblrIcon,
182186
TwitterIcon,
183187
ViberIcon,

demo/Demo.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import {
3535
RedditShareCount,
3636
TelegramIcon,
3737
TelegramShareButton,
38+
ThreadsIcon,
39+
ThreadsShareButton,
3840
TumblrIcon,
3941
TumblrShareButton,
4042
TumblrShareCount,
@@ -305,6 +307,16 @@ export function Demo() {
305307
<HatenaShareCount url={shareUrl} className="Demo__some-network__share-count" />
306308
</div>
307309
</div>
310+
311+
<div className="Demo__some-network">
312+
<ThreadsShareButton
313+
url={shareUrl}
314+
title={title}
315+
className="Demo__some-network__share-button"
316+
>
317+
<ThreadsIcon size={32} round />
318+
</ThreadsShareButton>
319+
</div>
308320
</div>
309321
);
310322
}

example.png

25.1 KB
Loading

src/ThreadsIcon.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import createIcon from './hocs/createIcon';
2+
3+
const ThreadsIcon = createIcon({
4+
color: '#000000',
5+
networkName: 'threads',
6+
path: 'M41.4569 31.0027C41.2867 30.9181 41.1138 30.8366 40.9386 30.7586C40.6336 24.9274 37.5624 21.5891 32.4055 21.5549C32.3821 21.5548 32.3589 21.5548 32.3355 21.5548C29.251 21.5548 26.6857 22.9207 25.1067 25.4063L27.9429 27.4247C29.1224 25.5681 30.9736 25.1723 32.3369 25.1723C32.3526 25.1723 32.3684 25.1723 32.384 25.1724C34.082 25.1837 35.3633 25.6958 36.1926 26.6947C36.7961 27.4218 37.1997 28.4267 37.3996 29.6949C35.8941 29.4294 34.266 29.3478 32.5255 29.4513C27.6225 29.7443 24.4705 32.711 24.6822 36.8332C24.7896 38.9242 25.7937 40.7231 27.5094 41.8982C28.96 42.8916 30.8282 43.3774 32.7699 43.2674C35.3341 43.1216 37.3456 42.1066 38.749 40.2507C39.8148 38.8413 40.4889 37.0149 40.7865 34.7136C42.0085 35.4787 42.9142 36.4855 43.4144 37.6959C44.2649 39.7534 44.3145 43.1344 41.6553 45.8908C39.3255 48.3055 36.525 49.3501 32.2926 49.3824C27.5977 49.3463 24.0471 47.7842 21.7385 44.7396C19.5768 41.8886 18.4595 37.7706 18.4179 32.5C18.4595 27.2293 19.5768 23.1113 21.7385 20.2604C24.0471 17.2157 27.5977 15.6537 32.2925 15.6175C37.0215 15.654 40.634 17.2235 43.0309 20.2829C44.2062 21.7831 45.0923 23.6698 45.6764 25.8696L49 24.9496C48.2919 22.2419 47.1778 19.9087 45.6616 17.9736C42.5888 14.0514 38.0947 12.0417 32.3041 12H32.2809C26.5022 12.0415 22.0584 14.0589 19.073 17.9961C16.4165 21.4997 15.0462 26.3747 15.0001 32.4856L15 32.5L15.0001 32.5144C15.0462 38.6252 16.4165 43.5004 19.073 47.004C22.0584 50.941 26.5022 52.9586 32.2809 53H32.3041C37.4418 52.9631 41.0632 51.5676 44.0465 48.4753C47.9496 44.4297 47.8321 39.3587 46.5457 36.2457C45.6227 34.0134 43.8631 32.2002 41.4569 31.0027ZM32.5863 39.6551C30.4374 39.7807 28.205 38.78 28.0949 36.6367C28.0133 35.0476 29.185 33.2743 32.7182 33.0631C33.1228 33.0389 33.5199 33.027 33.9099 33.027C35.1933 33.027 36.3939 33.1564 37.4854 33.4039C37.0783 38.6788 34.6902 39.5353 32.5863 39.6551Z',
7+
});
8+
9+
export default ThreadsIcon;

src/ThreadsShareButton.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import assert from './utils/assert';
2+
import objectToGetParams from './utils/objectToGetParams';
3+
import createShareButton from './hocs/createShareButton';
4+
5+
function threadsLink(url: string, { title }: { title?: string }) {
6+
assert(url, 'threads.url');
7+
8+
return (
9+
'https://threads.net/intent/post' +
10+
objectToGetParams({
11+
url,
12+
text: title,
13+
})
14+
);
15+
}
16+
17+
const ThreadsShareButton = createShareButton<{
18+
title?: string;
19+
via?: string;
20+
hashtags?: string[];
21+
related?: string[];
22+
}>(
23+
'threads',
24+
threadsLink,
25+
props => ({
26+
title: props.title,
27+
}),
28+
{
29+
windowWidth: 550,
30+
windowHeight: 600,
31+
},
32+
);
33+
34+
export default ThreadsShareButton;

src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export { default as GabIcon } from './GabIcon';
3333
export { default as RedditShareCount } from './RedditShareCount';
3434
export { default as TelegramIcon } from './TelegramIcon';
3535
export { default as TelegramShareButton } from './TelegramShareButton';
36+
export { default as ThreadsIcon } from './ThreadsIcon';
37+
export { default as ThreadsShareButton } from './ThreadsShareButton';
3638
export { default as TumblrIcon } from './TumblrIcon';
3739
export { default as TumblrShareButton } from './TumblrShareButton';
3840
export { default as TumblrShareCount } from './TumblrShareCount';

0 commit comments

Comments
 (0)