FormidableLabs / react-live

A flexible playground for live editing React components
https://commerce.nearform.com/open-source/react-live/
MIT License
4.28k stars 239 forks source link

How to retrive the error message shown in the LiveError component. #398

Open nalaso opened 1 week ago

nalaso commented 1 week ago

Is there an existing issue for this?

Code of Conduct

Question

Precisely how to use withLive? The link provided in existing issues are broken
carbonrobot commented 1 week ago

The withLive HOC is used to wrap any component nested in a LiveProvider

import React from "react";
import ReactDOM from "react-dom";
import {
  LiveProvider,
  LiveEditor,
  LivePreview,
  LiveError,
  withLive
} from "react-live";

const test = `
class TransformExample extends React.Component {

  render() {
    return (
      <center>
        <button onClick={this.boop}><h3>Boop!</h3></button>
      </center>
    )
  }
}
`;

function Live({ live, onEdit }) {
  return (
    <>
      <pre>{live.error}</pre>
      <LiveEditor onChange={onEdit} />
      <LivePreview />
    </>
  );
}

const LiveComponent = withLive(Live);

function App(props) {
  const [code, setCode] = React.useState(test);
  console.log(code);
  return (
    <LiveProvider code={code}>
      <LiveComponent onEdit={setCode} />
    </LiveProvider>
  );
}

const LiveApp = withLive(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<LiveApp />, rootElement);