DEV Community

Cover image for ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox
Stevie G
Stevie G

Posted on • Updated on

ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox

If you have ever used the ES7 React, Redux, GraphQL, React-Native snippets VSCode Extension, you've probably become so used to using the shorthand prefixes to speed up your development process.

Sometimes when we want to throw something together quickly on CodeSandbox.io and then realised you don't have the ES7 React, Redux, GraphQL, React-Native snippets extension and you have to type it our manually, it slows down your entire development process.

Today I will show you how to add the same functionality in your CodeSandbox workspace.

Firstly we will start the process for the JavaScript version of the snippets.

Open the generated.json

Copy the entire file contents of the raw generated.json file.

Now let's head over to CodeSandbox.io and create a SandBox so we can access our settings.

Once you have created a SandBox, go to the File menu, then Preferences, then User Snippets

Screenshot 1

Then select New Global Snippet File
Screenshot 2

and name the file snippets.code-snippets

Paste the contents that you copied from the snippets.json into the newly created snippets.code-snippets file and Save.

Congratulations! You have now brought the functionality of the ES7 React, Redux, GraphQL, React-Native snippets extension over to CodeSandbox. Go ahead and try create a new react component as you normally would.

Enjoy and give me a like and follow if this helped you.

Join me on HashNode

Top comments (8)

Collapse
 
everatwork profile image
wladyslawko

it worked! thnx a ton, Stevie!

Collapse
 
itsmestevieg profile image
Stevie G

You are most welcome! Glad to help my fellow Devs! if you want to show appreciation, please drop me a like and follow :)

Collapse
 
sahiba0915 profile image
Sahiba Kumari

thanks, its was really useful

Collapse
 
itsmestevieg profile image
Stevie G

You are most welcome! Glad to help my fellow Devs! if you want to show appreciation, please drop me a like and follow :)

Collapse
 
nidhidsharma08121988 profile image
Nidhi Sharma

Thanks for sharing this.

Collapse
 
itsmestevieg profile image
Stevie G

You are most welcome! Glad to help my fellow Devs! if you want to show appreciation, please drop me a like and follow :)

Collapse
 
yogeshdatir profile image
Yogesh Datir

I think we don't have snippets option in codesandbox anymore.

Collapse
 
itsmestevieg profile image
Stevie G

just checked, its definitely still there