react-console

    1.0.0-rc.2 • Public • Published

    React Console

    A reconciler for rendering components to the browser's console, because why not.

    import React from "react";
    import console from "react-console";
     
    const name = "Chris";
    const color = "#21a0a0";
     
    console.log(
      <div>
        Hello,{" "}
        <strong>
          <em style={{ color }}>{name}</em>
        </strong>
        !
      </div>
    );

    Usage

    Install

    Add react-console as a dependency to your project.

    npm install react-console
    

    Console

    react-console exports a console context with an additional render method. This can be used as a replacement to the global console object, however it allows rendering of React components.

    Methods

    The following methods will render a component if the first and only argument is a React element.

    • .log
    • .info
    • .debug
    • .warn
    • .error
    • .group
    • .groupCollapsed
    • .trace

    Render

    The methods above are just sugar for the render method.

    import React from "react";
    import console from "react-console";
     
    console.render(<span>Ouch</span>, window.console, "error");
    // same as
    console.error(<span>Ouch</span>);

    Anchors

    Anchor elements will have their hrefs appended.

    import React from "react";
    import console from "react-console";
     
    console.log(<a href="https://google.com">Google</a>);

    Images

    You can render images however you must provide width and height props.

    import React from "react";
    import console from "react-console";
     
    console.log(
      <img
        alt="Random kitten"
        src="http://placekitten.com/180/150"
        width={180}
        height={150}
      />
    );

    User Components

    You can render any user defined component as long as they result to host components that are supported.

    import React from "react";
    import console from "react-console";
     
    function Diff(props) {
      return (
        <>
          <del style={{ color: "red" }}>{props.previous}</del>
          <span> → </span>
          <ins style={{ color: "green" }}>{props.next}</ins>
        </>
      );
    }
     
    console.log(<Diff previous="foo" next="bar" />);

    Caveats

    One-time log

    Logs are a one-time render, meaning components can't cause console logs. Therefore use of hooks will not work. Nor will self updating components via component lifecycles.

    Logging elements

    To log the element object itself instead of rendering you can do this:

    console.log("%o", <Foo />);
    // or
    window.console.log(<Foo />);

    No block or layout elements

    The console will only create spans for substitutions and removes any block styling. Trying to style complex layouts in the console won't work.

    However, you can try create block-like logs with a little padding trick.

    import React from "react";
    import console from "react-console";
     
    function ColorBlock(props) {
      return (
        <div
          style={{
            // use left/top paddings as if they were width/height
            paddingLeft: "32px",
            paddingTop: "32px",
            // set the font size to zero
            fontSize: 0,
            backgroundColor: props.color,
          }}
        >
          {/* render an empty string */}{" "}
        </div>
      );
    }
     
    console.log(
      <>
        <ColorBlock color="red" />
        <ColorBlock color="orange" />
        <ColorBlock color="yellow" />
        <ColorBlock color="green" />
        <ColorBlock color="blue" />
        <ColorBlock color="indigo" />
        <ColorBlock color="violet" />
      </>
    );

    Install

    npm i react-console

    DownloadsWeekly Downloads

    21

    Version

    1.0.0-rc.2

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • tur-nr