Alert

import React from "react";
import { Alert } from "shards-react";

export default function AlertExample() {
  return (
    <div className="example">
      <Alert theme="primary">
        Alert - Primary Theme (default) -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="secondary">
        Alert - Secondary Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="success">
        Alert - Success Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="danger">
        Alert - Danger Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="warning">
        Alert - Warning Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="info">
        Alert - Info Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="light">
        Alert - Light Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
      <Alert theme="dark">
        Alert - Dark Theme -{" "}
        <a className="alert-link" href="#">
          Example Link
        </a>
      </Alert>
    </div>
  );
}

import React from "react";
import { Alert } from "shards-react";

export default class DismissibleAlertExample extends React.Component {
  constructor(props) {
    super(props);
    this.dismiss = this.dismiss.bind(this);
    this.state = { visible: true };
  }

  render() {
    return (
      <Alert dismissible={this.dismiss} open={this.state.visible}>
        You can easily dismiss me using the <strong>close</strong> button &rarr;
      </Alert>
    );
  }

  dismiss() {
    this.setState({ visible: false });
  }
}

import React from "react";
import { Alert, Button } from "shards-react";

export default class SelfDismissingAlertExample extends React.Component {
  constructor(props) {
    super(props);

    this.interval = null;
    this.state = {
      visible: false,
      countdown: 0,
      timeUntilDismissed: 5
    };

    this.showAlert = this.showAlert.bind(this);
    this.handleTimeChange = this.handleTimeChange.bind(this);
    this.clearInterval = this.clearInterval.bind(this);
  }

  showAlert() {
    this.clearInterval();
    this.setState({ visible: true, countdown: 0, timeUntilDismissed: 5 });
    this.interval = setInterval(this.handleTimeChange, 1000);
  }

  handleTimeChange() {
    if (this.state.countdown < this.state.timeUntilDismissed - 1) {
      this.setState({
        ...this.state,
        ...{ countdown: this.state.countdown + 1 }
      });
      return;
    }

    this.setState({ ...this.state, ...{ visible: false } });
    this.clearInterval();
  }

  clearInterval() {
    clearInterval(this.interval);
    this.interval = null;
  }

  render() {
    return (
      <div>
        <Alert className="mb-3" open={this.state.visible} theme="success">
          Success! This alert will will be dismissed in{" "}
          {this.state.timeUntilDismissed - this.state.countdown} seconds!
        </Alert>
        <Button onClick={this.showAlert}>Show Alert!</Button>
      </div>
    );
  }
}