Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@interop-ui/react-announce

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@interop-ui/react-announce

  • 0.0.1-8
  • npm
  • Socket score

Version published
Maintainers
4
Created

react-announce

Installation

$ yarn add @interop-ui/react-announce
# or
$ npm install @interop-ui/react-announce

Usage

import * as React from 'react';
import { Announce, styles } from '@interop-ui/react-announce';
import { VisuallyHidden, styles as visuallyHiddenStyles } from '@interop-ui/react-visually-hidden';

function StatusChange(props) {
  return (
    <div>
      <VisuallyHidden style={visuallyHiddenStyles.root}>
        {/* Content inside Announce will inform screen reader users of a status change */}
        <Announce aria-relevant="all">Your friend is {props.status}</Announce>
      </VisuallyHidden>
      {/*
      You can render the content visually however you'd like. Announce content is added to an
      aria-live region. They'll be rendered visually by default, but since we've visually hidden
      the content above we can mirror it for sighted users and adapt our interface as needed, so
      long as the same content is effectively delivered to users in either context.
      */}
      <div style={{ background: props.status === 'online' ? 'forestgreen' : 'crimson' }}>
        Friend status: {props.status}
      </div>
    </div>
  );
}

FAQs

Package last updated on 23 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts