Skip to content

👀 <blink> for the 21st century

License

Notifications You must be signed in to change notification settings

bdchauvette/react-blink

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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"));

Why?

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 🎉

The blinking is powered by a CSS animation, so it's as BLAZING FAST 🚀 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"));

Edit l4rzmzvq37


Really, though…

Don't use this.

Seriously.

👀


License

0BSD – See LICENSE for details.

About

👀 <blink> for the 21st century

Resources

License

Stars

Watchers

Forks

Packages

No packages published