seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.45k stars 183 forks source link

Is it possible to write Typescript in the playroom? #244

Open jgodi opened 2 years ago

jgodi commented 2 years ago

I was wondering if there is a way to allow our users to write examples with Typescript inside of Playroom?

We have this component that we export to our users for some more complex examples:

export const FunctionWrapper = ({ children }) => children();

Then, it is used via and works for the majority of our use cases.

<FunctionWrapper>
  {() => {
    const [state, setState] = React.useState(123);
    return <div>{state}</div>;
  }}
</FunctionWrapper>

We have some spots where we want to show the proper Typescript approach for our more complex examples, but we can't get it to work. Any suggestions?

Something like this:

<FunctionWrapper>
  {() => {
    const [state, setState] = React.useState<number>123;

    const onClick = (event: MouseEvent) => {
      console.log("click");
    };

    return <div>{state}</div>;
  }}
</FunctionWrapper>
iamtekeste commented 2 years ago

hope you find an answer to your question, but wanted to say thank you for sharing that FunctionWrapper component, really handy!