React-source-code NPM

React Source Code

An NPM package to show off your personal React project code right in the browser!

Features

Install

    npm install react-source-code

Use in your personal project

Inside your index.js or App.js, add the SourceCodeDevTools component:

    import { SourceCodeDevTools } from "react-component-source"; 

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <React.StrictMode>
        <App />
        <SourceCodeDevTools />
      </React.StrictMode>
    );

Wrap any function component you want to show off with the withSourceCode HOC(Higher order component):

    import { withSourceCode } from "react-component-source";

    export const CoolComponent = withSourceCode(() {
      return (
        <div>My Cool Component</div>
      );
    });

For class components you can wrap the class itself or it's export but you must supply a partial path to the component:

    import { withSourceCode } from "react-component-source";

    class CoolComponent extends React.Component<> {
      render() {
        return (
          <div>My Cool Component</div>
        );
      }
    }

    export default withSourceCode(CoolComponent, "src/component/CoolComponent"); // A path is a must for classes

What is this partial path ?

It's a way to identify the component in your project source map files where the original code could be found. You supply it to the withSourceCode HOC as an optional second argument. You can even supply the component name only, if it's unique in your project. If at any time your component's code couldn't be found, supply a better path. Or check your bundle tools to make sure you're building source map files.