search

agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://agilgur5.github.io/react-signature-canvas/
Other
547 stars 119 forks source link

Add CodeSandbox #32

Closed agilgur5 closed 5 years ago

agilgur5 commented 5 years ago

Having a CodeSandbox in the docs would be very useful as a quick example folks can use to try it out and use it in real code simultaneously.

I was hoping to easily hook it up to the gh-pages branch last week, but this is not quite so easy, so will document/note down some things here

agilgur5 commented 5 years ago

RE: gh-pages branch difficulty Initially I just got a blank screen in the preview, but realized this was because I was blocking a bunch of things (e.g. ata-fetcher). Once I unblocked stuff, it did the little loading animation and then showed a blank screen again. DevTools showed a few unhelpful error messages like:

t {id: "punycode", exports: {…}, parent: t, filename: "punycode", loaded: false, …} "had trouble loading..."
vendors~app.58180fdb.chunk.js:28 Uncaught Error: Error: ENOENT: No such file or directory., '/sandbox/punycode'
GET https://ata-fetcher.cloud/api/v5/typings/babel-core@6.26.3.json 422
gh-pages:1 Not allowed to load local resource: file:///extensions/markdown-language-features/media/PreviewOnRightPane_16x_dark.svg

Then I found out CodeSandbox only supports CRA in Browser Sandboxes (see template in the sandbox configuration), and only supports custom webpack (etc) in Container Sandboxes.

I would think the gh-pages branch would be compatible with CRA, but I guess not :/ . Though the error messages don't exactly help figure out what the exact issues are :/. Had to create a new branch to support CRA and CodeSandbox since the gh-pages branch isn't compatible for a few reasons (some that can't be fixed to support both simultaneously -- like gh-pages loading index.html from repo root and CRA from public/)

agilgur5 commented 5 years ago

It took a little while to figure out the CRA branch, especially since I had to update Node for CRA, CRA is a massive, slow install (maybe I really should use pnpm to help with this), I had to re-install it again after I uninstalled the devDeps as otherwise npm would try to re-use the existing, outdated ones, and then had 1 styling issue afterward for some reason.

But once that was done, just had to move a bunch of files/config around and then worked instantly on CodeSandbox!

The branch is currently at cra-example and the CodeSandbox loads the branch directly at https://codesandbox.io/s/github/agilgur5/react-signature-canvas/tree/cra-example

agilgur5 commented 5 years ago

So now just need to add the CodeSandbox to the docs. I'm thinking of combining the Example and Demo section into one bigger Examples section with ordered bullets like:

1. View the live demo ....
2. Play with the CodeSandbox ....
3. View some example code here ...

Not as cool as a heading link, but works and feels more organized than like 3 separate sections.

I had also been thinking of embedding a CodeSandbox into the README, but yea that ain't possible in GitHub itself. (GitHub would be verrrry different if you could embed stuff). Could do it on a custom docs GH Page if I realllly wanted to though. But maybe now is a good time to finally add a GIF to the README