Message

Displays a popup containing a message.

message

Example

<div id="message"></div>

import React from 'react';
import {render} from 'react-dom';
import Message from '@jetbrains/ring-ui/components/message/message';
import Popup from '@jetbrains/ring-ui/components/message/message';

const {Directions} = Popup.PopupProps;

const container = document.getElementById('message');
const onGotIt = () => console.log('>>>>> got it');

render(
  <div style={{padding: 200}}>
    <span>
      Anchor
      <Message
        title="This is title"
        onClose={onGotIt}
        direction={Directions.TOP_RIGHT}
        tailOffset={32}
      >
        This is long long long long long long long long long long long long long long long long long long description
      </Message>
    </span>
  </div>,
  container
);

with onDissmiss

Example

<div id="message"></div>

import React from 'react';
import {render} from 'react-dom';
import Message from '@jetbrains/ring-ui/components/message/message';
import Popup from '@jetbrains/ring-ui/components/message/message';

const {Directions} = Popup.PopupProps;

const container = document.getElementById('message');
const onGotIt = () => console.log('>>>>> got it');
const onDismiss = () => console.log('>>>>> dismiss');

render(
  <div style={{padding: 200}}>
    <span>
      Anchor
      <Message
        title="This is title"
        onClose={onGotIt}
        onDismiss={onDismiss}
        direction={Directions.TOP_RIGHT}
        tailOffset={32}
      >
        This is long long long long long long long long long long long long long long long long long long description
      </Message>
    </span>
  </div>,
  container
);