;
54 | }
55 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from "react";
2 | import {
3 | canUseDOM,
4 | useShallowCompareMemoize,
5 | removeChildrenWithAttribute,
6 | twWidgetFactory,
7 | cloneShallow
8 | } from "./utils";
9 |
10 | export { loadTwitterLibrary as eagerLoadTwitterLibrary } from "./utils";
11 |
12 | const childDivIdentifyingAttribute = "twdiv";
13 |
14 | function useTwitterWidget(factoryFunctionName, primaryArg, options, onLoad) {
15 | const [error, setError] = useState(null);
16 |
17 | const ref = useRef(null);
18 |
19 | // noop if ssr
20 | if (!canUseDOM) {
21 | return { ref, error };
22 | }
23 |
24 | // Make deps for useEffect.
25 | // options, and possibly primaryArg, are objects that should be compared (shallow).
26 | // There currently aren't any nested arrays or objects, so they
27 | // can be cloned in a shallow manner.
28 | // NOTE onLoad is used in useCallback, but it is not listed as a dependency.
29 | // Listing it would likely cause unnecessary loads. The latest onLoad should be
30 | // used regardless, since it will not be called unless the other dependencies
31 | // change, so it works out.
32 | const deps = [
33 | factoryFunctionName,
34 | useShallowCompareMemoize(primaryArg),
35 | useShallowCompareMemoize(options)
36 | ];
37 |
38 | useEffect(() => {
39 | // Reset error
40 | setError(null);
41 |
42 | // Protect against race conditions
43 | // (set to true in cleanup function;
44 | // checked if canceled in async loadWidget)
45 | let isCanceled = false;
46 |
47 | if (ref.current) {
48 | removeChildrenWithAttribute(ref.current, childDivIdentifyingAttribute);
49 |
50 | if (!ref || !ref.current) {
51 | return;
52 | }
53 |
54 | const childEl = document.createElement("div");
55 | childEl.setAttribute(childDivIdentifyingAttribute, "yes");
56 | ref.current.appendChild(childEl);
57 |
58 | twWidgetFactory()
59 | .then(wf => {
60 | // primaryArg (possibly an object) and options must be cloned
61 | // since twitter mutates them (gah!).
62 | // There currently aren't any nested arrays or objects, so they
63 | // can be cloned in a shallow manner.
64 | return wf[factoryFunctionName](
65 | cloneShallow(primaryArg),
66 | childEl,
67 | cloneShallow(options)
68 | );
69 | })
70 | .then(resultMaybe => {
71 | // Twitter returns undefined if widget creation fails.
72 | // However, if deps are stale (isCanceled), suppress error (likely race condition).
73 | if (!resultMaybe && !isCanceled) {
74 | throw new Error(
75 | "Twitter could not create widget. If it is a Timeline or " +
76 | "Tweet, ensure the screenName/tweetId exists."
77 | );
78 | }
79 |
80 | if (!ref || !ref.current) {
81 | return;
82 | }
83 |
84 | if (isCanceled) {
85 | if (childEl) {
86 | childEl.remove();
87 | }
88 | return;
89 | }
90 |
91 | if (onLoad) {
92 | onLoad();
93 | }
94 | })
95 | .catch(e => {
96 | console.error(e);
97 | setError(e);
98 | });
99 | }
100 |
101 | return () => {
102 | isCanceled = true;
103 | };
104 | }, deps);
105 |
106 | return { ref, error };
107 | }
108 |
109 | export const Follow = ({ username, options, onLoad, renderError }) => {
110 | const { ref, error } = useTwitterWidget(
111 | "createFollowButton",
112 | username,
113 | options,
114 | onLoad
115 | );
116 | return {error && renderError && renderError(error)}
;
117 | };
118 |
119 | export const Hashtag = ({ hashtag, options, onLoad, renderError }) => {
120 | const { ref, error } = useTwitterWidget(
121 | "createHashtagButton",
122 | hashtag,
123 | options,
124 | onLoad
125 | );
126 | return {error && renderError && renderError(error)}
;
127 | };
128 |
129 | export const Mention = ({ username, options, onLoad, renderError }) => {
130 | const { ref, error } = useTwitterWidget(
131 | "createMentionButton",
132 | username,
133 | options,
134 | onLoad
135 | );
136 | return {error && renderError && renderError(error)}
;
137 | };
138 |
139 | export const Share = ({ url, options, onLoad, renderError }) => {
140 | const { ref, error } = useTwitterWidget(
141 | "createShareButton",
142 | url,
143 | options,
144 | onLoad
145 | );
146 | return {error && renderError && renderError(error)}
;
147 | };
148 |
149 | export const Timeline = ({ dataSource, options, onLoad, renderError }) => {
150 | const { ref, error } = useTwitterWidget(
151 | "createTimeline",
152 | dataSource,
153 | options,
154 | onLoad
155 | );
156 | return {error && renderError && renderError(error)}
;
157 | };
158 |
159 | export const Tweet = ({ tweetId, options, onLoad, renderError }) => {
160 | const { ref, error } = useTwitterWidget(
161 | "createTweet",
162 | tweetId,
163 | options,
164 | onLoad
165 | );
166 | return {error && renderError && renderError(error)}
;
167 | };
168 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | import loadjs from "loadjs";
2 | import { useRef } from "react";
3 |
4 | const twScriptUrl = "https://platform.twitter.com/widgets.js";
5 | const twScriptWindowFieldName = "twttr";
6 | const twScriptName = twScriptWindowFieldName;
7 |
8 | export const canUseDOM = !!(
9 | typeof window !== "undefined" &&
10 | window.document &&
11 | window.document.createElement
12 | );
13 |
14 | export function loadTwitterLibrary() {
15 | if (!loadjs.isDefined(twScriptName)) {
16 | loadjs(twScriptUrl, twScriptName);
17 | }
18 | }
19 |
20 | export function twWidgetFactory() {
21 | return new Promise((resolve, reject) => {
22 | const rejectWithError = () =>
23 | reject(new Error("Could not load remote twitter widgets js"));
24 |
25 | loadTwitterLibrary();
26 |
27 | loadjs.ready(twScriptName, {
28 | success: () => {
29 | // Ensure loaded
30 | const twttr = window[twScriptWindowFieldName];
31 | if (!twttr || !twttr.widgets) {
32 | rejectWithError();
33 | }
34 | resolve(twttr.widgets);
35 | },
36 | error: rejectWithError
37 | });
38 | });
39 | }
40 |
41 | export function removeChildrenWithAttribute(node, attribute) {
42 | if (node) {
43 | node.querySelectorAll("*").forEach(child => {
44 | if (child.hasAttribute(attribute)) {
45 | child.remove();
46 | }
47 | });
48 | }
49 | }
50 |
51 | function is(x, y) {
52 | if (x === y) {
53 | return x !== 0 || y !== 0 || 1 / x === 1 / y;
54 | } else {
55 | return x !== x && y !== y;
56 | }
57 | }
58 | function isShallowEqual(objA, objB) {
59 | if (is(objA, objB)) {
60 | return true;
61 | }
62 |
63 | if (
64 | typeof objA !== "object" ||
65 | objA === null ||
66 | typeof objB !== "object" ||
67 | objB === null
68 | ) {
69 | return false;
70 | }
71 |
72 | const keysA = Object.keys(objA);
73 | const keysB = Object.keys(objB);
74 |
75 | if (keysA.length !== keysB.length) {
76 | return false;
77 | }
78 |
79 | for (let i = 0; i < keysA.length; i++) {
80 | if (
81 | !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
82 | !is(objA[keysA[i]], objB[keysA[i]])
83 | ) {
84 | return false;
85 | }
86 | }
87 |
88 | return true;
89 | }
90 |
91 | export function useShallowCompareMemoize(value) {
92 | const ref = useRef();
93 | if (!isShallowEqual(value, ref.current)) {
94 | ref.current = value;
95 | }
96 | return ref.current;
97 | }
98 |
99 | export function cloneShallow(value) {
100 | return typeof value === "object" ? Object.assign({}, value) : value;
101 | }
102 |
--------------------------------------------------------------------------------
/stories/0-Follow.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Follow } from "../src";
3 |
4 | export default {
5 | title: "Follow",
6 | component: Follow
7 | };
8 |
9 | export const Basic = () =>
17 | "Could not load timeline! ...Your custom component here"
18 | }
19 | />
20 | );
21 |
22 | export const ProfileSmaller = () => (
23 | "Could not load tweet! ...Your custom component here"}
15 | />
16 | );
17 |
18 | export const Smaller = () => (
19 |
14 | react-twitter-widgets protects against race conditions with many
15 | successive prop updates. Drag the slider to send many successive updates
16 | to timeline height.
17 |
18 |
19 |
29 |