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.

Development

You can submit pull requests.

Features

• Typescript strongly typed with typings exported
• Rollup for build
• Bundle generated in cjs and esm formats
• Storybook for local development

Commands

• npm install - install project dependencies
• npm run storybook - start local development environment.
• npm run build - build package into dist/ folder
• npm publish - publish your package to npm.

License

MIT license, Copyright (c) Juan Pablo Mejia Duque. For more information see LICENSE.