How to use the react-dom-factories.img function in react-dom-factories

To help you get started, we’ve selected a few react-dom-factories examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github firefox-devtools / devtools-core / packages / devtools-launchpad / src / components / LandingPage.js View on Github external
renderExperimentalMessage(browserName) {
    const underConstructionMessage =
      "Debugging is experimental and certain features won't work (i.e, seeing variables, attaching breakpoints)"; // eslint-disable-line max-len

    return dom.div(
      { className: "under-construction" },
      dom.div(
        { className: "under-construction-message" },
        dom.p({}, underConstructionMessage),
        dom.img({ src: "/pad-assets/under_construction.png" }),
        dom.a(
          {
            className: "github-link",
            target: "_blank",
            href: docsUrls.github
          },
          "Help us make it happen"
        )
      )
    );
  }
github researchspace / researchspace / researchspace / web / src / main / widgets / ObjectRepresentationsWidget.ts View on Github external
appear: true,
                leave: true,
                timeout: {
                  appear: this.TRANSITION_TIME,
                  enter: this.TRANSITION_TIME,
                  exit: this.TRANSITION_TIME,
                }
              },
              D.span({
                className: 'object-representations-modal__nav fa fa-chevron-circle-right',
                onClick: this.nextModalImage.bind(this)
              })
            ),
          ] : []
        ),
        D.img({
          src: fullSizeImgURL,
          style: {
            width: this.state.focusedModalRep.isJust ? `${this.state.focusedModalRep.get().width}px` : '0px'
          }
        }),
      ) // end modal body
    ); // end modal
  }
github researchspace / researchspace / researchspace / web / src / main / widgets / ObjectRepresentationsWidget.ts View on Github external
onLoad: this.handleImageChanges,
      },
      createElement(TransitionGroup,
        {
          key: 'image-focused-transition-group',
        },
        createElement(CSSTransition,
          {
            key: focused,
            classNames: 'cross-fade',
            timeout: {
              enter: this.TRANSITION_TIME,
              exit: this.TRANSITION_TIME,
            }
          },
          D.img({
            className: 'image--focused',
            src: focused,
            key: focused,
          })
        )
      )
    );
  }
github firefox-devtools / devtools-core / packages / devtools-components / src / tree.js View on Github external
render() {
    const {
      expanded,
    } = this.props;

    const classNames = ["arrow"];
    if (expanded) {
      classNames.push("expanded");
    }
    return dom.img({
      className: classNames.join(" "),
    });
  }
}