@bdchauvette/react-blink
v1.0.2
Published
<blink> for the 21st century
Downloads
20
Readme
@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: