react-faux-button v1.0.0
React Faux Button
Accessible React
<button>usurper.
Table of Contents
NOTE
Use sparingly. If you can use the default <button> – possible more often than not – just do so.
Incidentally, this is the reason the package is called "faux" button :)
Features
- Accessible defaults.
- Full presentational control for the caller.
- Easy to understand source code. You should be able to fork and do your thing if desired.
- Ample documentation to help you understand the problem, in addition to the solutions.
What it does not do by itself:
- Style things. That is up to you :)
Install
This package is distributed via npm.
$ npm install --save react-faux-button
# or
$ yarn add react-faux-buttonThen import according to your modules model and bundler, such as Rollup and Webpack:
// ES Modules
import { FauxButton } from "react-faux-button";
/// CommonJS modules
const { FauxButton } = require("react-faux-button");A UMD version is also available on unpkg:
<script src="https://unpkg.com/react-faux-button/dist/react-faux-button.umd.js"></script>Motivation
When having an interactable item in your application, a button is almost always the right answer.
I have found that many developers are averse to using button due to its historical styling issues.
While I find the button resets (and more importantly, styling) to be straightforward nowadays, I often have
to work with codebases that use divs with an onClick. Those codebases might have non-straightforward
resets, might rely on the element being a div, and so on. In those cases, I find it particularly useful
to have an accessible button usurper. This is the one I use.
Usage
Quick Start
If you want to just dive in, do this:
import { FauxButton } from "react-faux-button";
<FauxButton tag="div" onInteraction={() => /* do something */}>
Print files
</FauxButton>References
The ARIA authoring practices offer a concise overview of expected button behaviour: