Better examples and codesandboxes

[giulioz]

They are pretty outdated and without good code standards

[haukesand]

Hi. I want to use your r3flex-jbgrq codesandbox example locally outside of codesandbox. However, I am not sure which typescript compiler options to use. The Text.tsx and scrollArea code part does not compile.
node --version v10.20.1
"target": "es2017",

[giulioz]

@haukesand What errors are you getting?

[haukesand]

My steps:

1. Clone and yarn install / start.
   /bin/sh: react-scripts: command not found
2. yarn add react-scripts
   (automatically added tsconfig.json)

Failed to compile.

src/Text.tsx
  Line 19:9:  Parsing error: Unexpected token

  17 | type TextMesh = ReactThreeFiber.Object3DNode<TextMeshImpl, typeof TextMeshImpl>;
  18 |
> 19 | declare global {
     |         ^
  20 |   namespace JSX {
  21 |     interface IntrinsicElements {
  22 |       textMeshImpl: TextMesh;
^C

I was unable to find out what typescript and react-script versions codesandbox uses.

[haukesand]

I got it to compile if I do not import Text from .Text.tsx but from drei directly.
Add @types/react dependency and edit the typescript config:

   "strict": false,
    "noImplicitAny": false,
    "strictNullChecks": false,
    

Of course, the text layout is wrong now.

[saitonakamura]

@giulioz I've updated one of the codesandboxes to new versions/packages, but there's one thing I couldn't make work - some text aren't centered despite alignItems="center"
https://codesandbox.io/s/r3flex-forked-kbs4y?file=/src/App.tsx
If we can fix that we can use this updated example
The only thing I changes besides packages is to manually position the Flex in the upper right corner (position={[-vpWidth / 2, vpHeight / 2, 0]})

[giulioz]

@saitonakamura
To center the text you can work on the <Text /> component, adding textAlign="center" prop

[saitonakamura]

Oh, alright, updated https://codesandbox.io/s/r3flex-forked-kbs4y?file=/src/App.tsx
Looks like it's working correctly