{"pageProps":{"readTime":{"text":"2 min read","minutes":1.25,"time":75000,"words":250},"source":{"compiledSource":"\"use strict\";\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar layoutProps = {};\nvar MDXLayout = \"wrapper\";\n\nfunction MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"As you start writing more in React, it's easy to lose sight of how to do things \\\"outside\\\" of React.\"), mdx(\"p\", null, \"For example, if you had a React modal prompting the user to log in, but you wanted to be able to \\\"trigger\\\" that modal from some separate Javascript (maybe from a script tag added by an outside source), how would you do that?\"), mdx(\"p\", null, \"You might get caught up in a React-sounding solution:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-jsx\"\n }), \"function App() {\\n function openModal() {\\n // ...other code to open modal\\n }\\n\\n useEffect(() => {\\n // whenever openModal changes, you can bind it to the window?\\n window.openModal = openModal;\\n }, [openModal])\\n\\n // ... rest of the component\\n}\\n\")), mdx(\"p\", null, \"And while this might work in some simpler cases, we're putting a function in the global scope and it's likely that we'll run into bugs if certain things change.\"), mdx(\"p\", null, \"Instead, we should reach for a Javascript feature designed for situations like this: \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events\"\n }), \"Custom Events\"), \".\"), mdx(\"hr\", null), mdx(\"p\", null, \"When breaking down this problem, there are two main parts:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"We want our app to \\\"listen\\\" and respond to an outside event\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Code outside our app must be able to \\\"trigger\\\" this listener\")), mdx(\"p\", null, \"If this sounds familiar, it's because we use the same \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://en.wikipedia.org/wiki/Observer_pattern\"\n }), \"Observer Pattern\"), \" for HTML elements:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"\\n \\n \\n\\n\")), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io/s/custom-events-m95t5?view=split&fontsize=12\"\n }), \"https://codesandbox.io/s/custom-events-m95t5?view=split&fontsize=12\")));\n}\n\n;\nMDXContent.isMDXComponent = true;","renderedOutput":"

As you start writing more in React, it's easy to lose sight of how to do things "outside" of React.

For example, if you had a React modal prompting the user to log in, but you wanted to be able to "trigger" that modal from some separate Javascript (maybe from a script tag added by an outside source), how would you do that?

You might get caught up in a React-sounding solution:

1function App() {
2  function openModal() {
3    // ...other code to open modal
4  }
5
6  useEffect(() => {
7    // whenever openModal changes, you can bind it to the window?
8    window.openModal = openModal;
9  }, [openModal])
10
11  // ... rest of the component
12}

And while this might work in some simpler cases, we're putting a function in the global scope and it's likely that we'll run into bugs if certain things change.

Instead, we should reach for a Javascript feature designed for situations like this: Custom Events.

When breaking down this problem, there are two main parts:

If this sounds familiar, it's because we use the same Observer Pattern for HTML elements:

1<body>
2  <button>Alert!</button>
3  <script>
4    const button = document.querySelector('#button');
5
6    // we add our listener here, and the "click" event is our trigger
7    button.addEventListener('click', () => {
8      // when the even is triggered, we run this code
9      alert('Button Clicked!');
10    });
11  </script>
12</body>

https://codesandbox.io/s/custom-events-m95t5?view=split&fontsize=12

","scope":{"title":"How to Call React Code from Outside React","date":"2019-12-18","description":"Linking React and vanilla Javascript using custom events","tags":["Programming","React"]}},"frontMatter":{"title":"How to Call React Code from Outside React","date":"2019-12-18","description":"Linking React and vanilla Javascript using custom events","tags":["Programming","React"]}},"__N_SSG":true}