@bdchauvette/react-blink

@bdchauvette/react-blink

<blink> for the 21st century

Browser Compatibility

¯\_(ツ)_/¯

Installation

npm install @bdchauvette/react-blink

Usage

import React from "react";
import ReactDOM from "react-dom";
import { Blink } from "@bdchauvette/react-blink";

ReactDOM.render(<Blink>👁️ 👁️</Blink>, document.getElementById("root"));

This component brings the terrible, horrible, no good, very bad <blink> tag to React, allowing you to use latest and greatest front end technology to build World Wide Web sites like it's 1999 :tada:

The blinking is powered by a CSS animation, so it's as BLAZING FAST :rocket: as it is annoying.

Have you no sense of decency?

On a serious note, having blinking elements on the page is absolutely terrible UX, and you should never use this component.

However, if against all UX advice and reasonable design sensibilities you still decide to use this component, you should show your poor, pitiable users a modicum of respect, and allow them to disable the animation.

This library provides two methods of doing so.

Reduced Motion Media Query

The <Blink> stylesheet uses the prefer-reduced-motion media query to automatically disable the animation for users that have configured their device to prefer reduced motion.

React Context API

To provide users control over the blinking animation, you can place a <BlinkProvider> somewhere above all the <Blink> components in your tree, and use the disabled prop to control whether the animation is used:

import React from "react";
import ReactDOM from "react-dom";
import { Blink, BlinkProvider } from "@bdchauvette/react-blink";

class App extends React.Component {
  state = {
    blinkingIsDisabled: false
  };

  toggleBlinking = () => {
    this.setState(state => ({
      blinkingIsDisabled: !state.blinkingIsDisabled
    }));
  };

  render() {
    return (
      <BlinkProvider disabled={this.state.blinkingIsDisabled}>
        <Blink>👁️ 👁️</Blink>
        <button onClick={this.toggleBlinking}>
          {this.state.blinkingIsDisabled ? "Enable" : "Disable"} Blinking
        </button>
      </BlinkProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Really, though…

Don't use this.

Seriously.

:eyes:

License

0BSD – See LICENSE for details.