react#Node JavaScript Examples

The following examples show how to use react#Node. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From flatris-LAB_V1 with MIT License 6 votes vote down vote up 
renderScreen(content: Node, showOverlay: boolean = true) {
    return (
      <div className="screen-container">
        {content}
        <style jsx>{`
          .screen-container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: calc(100% / 16 * 6);
            background: ${showOverlay
              ? 'rgba(236, 240, 241, 0.85)'
              : 'transparent'};
          }
        `}</style>
      </div>
    );
  }
Example #2
Source File: Container.js    From Lambda with MIT License 6 votes vote down vote up 
Container = ({children}: {children: Node}) => (
  <div
    css={{
      paddingLeft: 20,
      paddingRight: 20,
      marginLeft: 'auto',
      marginRight: 'auto',
      [media.greaterThan('medium')]: {
        width: '90%',
      },

      [media.size('xxlarge')]: {
        maxWidth: 1260,
      },
    }}
  >
    {children}
  </div>
)
Example #3
Source File: ErrorDecoder.js    From Lambda with MIT License 6 votes vote down vote up 
// When the message contains a URL (like https://fb.me/react-refs-must-have-owner),
// make it a clickable link.
function urlify(str: string): Node {
  const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;

  const segments = str.split(urlRegex);

  return segments.map((message, i) => {
    if (i % 2 === 1) {
      return (
        <a key={i} target="_blank" rel="noopener" href={message}>
          {message}
        </a>
      );
    }
    return message;
  });
}
Example #4
Source File: Header.js    From Lambda with MIT License 6 votes vote down vote up 
Header = ({children}: {children: Node}) => (
  <h1
    css={{
      color: colors.dark,
      marginRight: '5%',
      ...fonts.header,
    }}
  >
    {children}
  </h1>
)
Example #5
Source File: createLink.js    From Lambda with MIT License 6 votes vote down vote up 
createLinkBlog = ({
  isActive,
  item,
  section,
}: CreateLinkBaseProps): Node => {
  return (
    <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
      {isActive && <span css={activeLinkBefore} />}
      {item.title}
    </Link>
  );
}
Example #6
Source File: createLink.js    From Lambda with MIT License 6 votes vote down vote up 
createLinkCommunity = ({
  isActive,
  item,
  section,
}: CreateLinkBaseProps): Node => {
  if (item.href) {
    return (
      <a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
        {item.title}
        <ExternalLinkSvg
          cssProps={{
            verticalAlign: -2,
            display: 'inline-block',
            marginLeft: 5,
            color: colors.subtle,
          }}
        />
      </a>
    );
  }
  return createLinkDocs({
    isActive,
    item,
    section,
  });
}
Example #7
Source File: createLink.js    From Lambda with MIT License 6 votes vote down vote up 
createLinkDocs = ({
  isActive,
  item,
  section,
}: CreateLinkBaseProps): Node => {
  return (
    <Link
      css={[linkCss, isActive && activeLinkCss]}
      to={slugify(item.id, section.directory)}
    >
      {isActive && <span css={activeLinkBefore} />}
      {item.title}
    </Link>
  );
}
Example #8
Source File: createLink.js    From Lambda with MIT License 6 votes vote down vote up 
createLinkTutorial = ({
  isActive,
  item,
  onLinkClick,
  section,
}: CreateLinkTutorialProps): Node => {
  return (
    <Link
      css={[linkCss, isActive && activeLinkCss]}
      onClick={onLinkClick}
      to={item.href}
    >
      {isActive && <span css={activeLinkBefore} />}
      {item.title}
    </Link>
  );
}
Example #9
Source File: Typography.jsx    From covid19-testing with Apache License 2.0 6 votes vote down vote up 
Node,
  className?: string,
  color?:
    | 'blue-black'
    | 'dark-teal'
    | 'dark-red'
    | 'dark-yellow'
    | 'light-blue'
    | 'text'
    | 'text-light',
  component?: string,
|
Example #10
Source File: toCommaSeparatedList.js    From Lambda with MIT License 5 votes vote down vote up 
addString = (list: Array<Node>, string: string) =>
  list.push(<span key={`${list.length}-${string}`}>{string}</span>)
Example #11
Source File: ScreenReaderHint.jsx    From covid19-testing with Apache License 2.0 5 votes vote down vote up 
Node,
  id?: string,
  role?: string,
|
Example #12
Source File: Button.jsx    From covid19-testing with Apache License 2.0 5 votes vote down vote up 
Node, // TODO: Refine type
  className
Example #13
Source File: typography.jsx    From covid19-testing with Apache License 2.0 5 votes vote down vote up 
Node,
  className?: string,
  component?: string,
|
Example #14
Source File: IntlProvider.js    From covid19-testing with Apache License 2.0 5 votes vote down vote up 
Node,
  userLanguage