Add prop to override button rendering in OpenInCodeSandbox (codesandbox#744)

Author: existentialism

packages/react-sandpack/src/components/OpenInCodeSandbox/OpenInCodeSandbox.tsx

@@ -4,7 +4,11 @@ import { IFiles } from '../../types';
 
 import SandpackConsumer from '../SandpackConsumer';
 
-export default class OpenInCodeSandbox extends React.Component {
+export interface Props {
+  render?: () => React.ReactNode;
+}
+
+export default class OpenInCodeSandbox extends React.Component<Props> {
   getFileParameters = (files: IFiles) => {
     const normalized: {
       [path: string]: { content: string; isBinary: boolean };
@@ -22,22 +26,32 @@ export default class OpenInCodeSandbox extends React.Component {
     return getParameters({ files: normalized });
   };
 
+  renderButton() {
+    if (typeof this.props.render === 'function') {
+      return this.props.render();
+    }
+
+    return <input type="submit" value="Open in CodeSandbox" />;
+  }
+
   render() {
+    const { render, ...props } = this.props;
+
     return (
       <SandpackConsumer>
         {sandpack => (
           <form
             action="https://codesandbox.io/api/v1/sandboxes/define"
             method="POST"
             target="_blank"
-            {...this.props}
+            {...props}
           >
             <input
               type="hidden"
               name="parameters"
               value={this.getFileParameters(sandpack.files)}
             />
-            <input type="submit" value="Open in CodeSandbox" />
+            {this.renderButton()}
           </form>
         )}
       </SandpackConsumer>

packages/react-sandpack/stories/OpenInCodeSandbox.js

@@ -2,20 +2,36 @@ import React from 'react';
 import JSXAddon from 'storybook-addon-jsx';
 import { storiesOf, setAddon } from '@storybook/react';
 
+import SandpackProvider from '../src/components/SandpackProvider/index.ts';
 import OpenInCodeSandbox from '../src/components/OpenInCodeSandbox/index.ts';
 
 setAddon(JSXAddon);
 
 const stories = storiesOf('Export To CodeSandbox', module);
 
+stories.addWithJSX('minimal', () => (
+  <SandpackProvider
+    entry="/index.js"
+    files={{
+      '/index.js': {
+        code: '',
+      },
+    }}
+    dependencies={{}}
+  >
+    <OpenInCodeSandbox />
+  </SandpackProvider>
+));
+
 stories.addWithJSX('with multiple files', () => (
-  <OpenInCodeSandbox
+  <SandpackProvider
+    entry="/index.js"
     files={{
       '/index.js': {
         code: `import Hello from './Hello.js';
 
-document.body.innerHTML = JSON.stringify(Hello);
-`,
+  document.body.innerHTML = JSON.stringify(Hello);
+  `,
       },
       '/Hello.js': {
         code: `export default \`Hello from another file, here's an ID: $\{require('uuid')()}!\``,
@@ -24,5 +40,25 @@ document.body.innerHTML = JSON.stringify(Hello);
     dependencies={{
       uuid: 'latest',
     }}
-  />
+  >
+    <OpenInCodeSandbox />
+  </SandpackProvider>
+));
+
+stories.addWithJSX('with render prop', () => (
+  <SandpackProvider
+    entry="/index.js"
+    files={{
+      '/index.js': {
+        code: '',
+      },
+    }}
+    dependencies={{}}
+  >
+    <OpenInCodeSandbox
+      render={() => {
+        return <button type="submit">CodeSandbox is awesome!</button>;
+      }}
+    />
+  </SandpackProvider>
 ));