Wondering what’s next for npm?Check out our public roadmap! »

    rebug

    0.0.3 • Public • Published

    Rebug

    Disclaimer: Experimental project. APIs might change, use at your discretion.

    Declaratively debug your component visually at per-component level.

    Usage

    /* Shows component display name and DOM tag name/dimensions if possible */
    import { debugComponentName } from 'rebug'
     
    class YourComponent extends React.Component{
      render(){
        return <div>My Component</div>
      }
    }
     
    export default debugComponentName(YourComponent)

    Or use it as decorator:

    @debugComponentName
    class Component extends React.Component {
      /*...*/
    }

    You can customize your debug configuration:

    import debug from 'rebug'
    const config = {
      /* styles (currently it is the styles of wrapper component) */
      styles: {
      },
      /* styles when component is hovered. */
      hoveredStyles: {
        boxShadow: "0 0 0 1px royalblue",
      },
      /* the debug view configuration, it's visible when component is hovered */
      debugView: {
        /* Shows the component name */
        ComponentName: {
          styles: {
            background: 'royalblue',
          }
        },
        /* Shows the DOM tag name and dimensions */
        DOMTagName: {}
      }
    }
    export debug(config)(YourComponent)

    You can debug connected components as well:

    export debug(config)(connect(SomeComponent))

    Features

    • Show component's name, DOM tag name, dimensions
    • WIP: inspect component props and state
      • detect state change

    Implementation and known issues

    The goal is to overlay (it doesn't have to be a wrapper) the debugging segment on the original component.

    Currently YourComponent is wrapped in an additional div. This might not work for some cases. Since border is rendered using box shadow, it might get blocked by the box shadow of the component to inspect.

    Another approach is to render the additional component into the DOM tree on componentDidMount. Also need to check the support in React DevTools API.

    Keywords

    none

    Install

    npm i rebug

    DownloadsWeekly Downloads

    5

    Version

    0.0.3

    License

    ISC

    Last publish

    Collaborators

    • avatar