Skip to content

Commit 9199f6a

Browse files
NovinyCompuIves
authored andcommitted
Add information on using react-codesandboxer (codesandbox#653)
Adding information on react-codesandboxer Added this as its own section, with a simple example as a code snippet. Happy to make this briefer and point to the external docs, and make it longer to make the link more superfluous.
1 parent d8e781e commit 9199f6a

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

packages/homepage/content/docs/2-importing.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,3 +131,31 @@ If you want to define a new sandbox without getting it rendered, you can add `?j
131131
This is useful, for instance, if you need to create a new sandbox programatically, so you can then embed it on your site (See Embed documentation).
132132

133133
Both `get` and `post` requests are supported.
134+
135+
## Import Using React-Codesandboxer
136+
137+
Import from a single file from a git repository, along with supplemental files and dependencies. Using this creates an easy way to upload an example instead of an entire git repository.
138+
139+
### How it works
140+
141+
Below the surface, react-codesandboxer fetches the files it needs from github or bitbucket, using a single file that will be rendered as the 'example' as an entry point, then uses the Define API to upload the necessary files into a new `create-react-app` sandbox.
142+
143+
Check out the [react-codesandboxer docs](https://github.com/noviny/react-codesandboxer) for information on how to implement it.
144+
145+
```jsx
146+
import React, { Component } from 'react';
147+
import CodeSandboxer from 'react-codesandboxer';
148+
149+
export default () => (
150+
<CodeSandboxer
151+
examplePath="examples/file.js"
152+
gitInfo={{
153+
account: 'noviny',
154+
repository: 'react-codesandboxer',
155+
host: 'github',
156+
}}
157+
>
158+
{() => <button type="submit">Upload to CodeSandbox</button>}
159+
</CodeSandboxer>
160+
);
161+
```

0 commit comments

Comments
 (0)