feat(v2): allow adding components to react-live scope

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -9,6 +9,7 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
 import CodeBlock from '@theme-init/CodeBlock';
 
 const withLiveEditor = (Component) => {
@@ -20,7 +21,7 @@ const withLiveEditor = (Component) => {
  return (
  <Playground
  key={isClient}
- scope={{...React}}
+ scope={ReactLiveScope}
  theme={prismTheme}
  {...props}
  />

packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+ React,
+ ...React,
+};
+
+export default ReactLiveScope;

website/docs/markdown-features.mdx

@@ -735,6 +735,57 @@ function Clock(props) {
 }
 ```
 
+:::caution react-live and imports
+
+It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.
+
+:::
+
+By default, all React imports are available. If you need more imports available, swizzle the react-live scope:
+
+```bash npm2yarn
+npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
+```
+
+```jsx {3-15,21} title="src/theme/ReactLiveScope/index.js"
+import React from 'react';
+
+const ButtonExample = (props) => (
+ <button
+ {...props}
+ style={{
+ backgroundColor: 'white',
+ border: 'solid red',
+ borderRadius: 20,
+ padding: 10,
+ cursor: 'pointer',
+ ...props.style,
+ }}
+ />
+);
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+ React,
+ ...React,
+ ButtonExample,
+};
+
+export default ReactLiveScope;
+```
+
+The `ButtonExample` component is now available to use:
+
+```jsx live
+function MyPlayground(props) {
+ return (
+ <div>
+ <ButtonExample onClick={() => alert('hey!')}>Click me</ButtonExample>
+ </div>
+ );
+}
+```
+
 ### Multi-language support code blocks
 
 With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.

website/src/theme/ReactLiveScope/components.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const ButtonExample = (props) => (
+ <button
+ {...props}
+ style={{
+ backgroundColor: 'white',
+ border: 'solid red',
+ borderRadius: 20,
+ padding: 10,
+ cursor: 'pointer',
+ ...props.style,
+ }}
+ />
+);

website/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import * as components from './components';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+ React,
+ ...React,
+ ...components,
+};
+
+export default ReactLiveScope;