itsa-react-button
Version:
Interactive button, like a normal button, but with extended behaviour
48 lines (29 loc) • 1.67 kB
Markdown
[](https://travis-ci.org/ItsAsbreuk/itsa-react-button)
Interactive button, like a normal button, but with extended behaviour.
Lightweight, focussable, responses to keypresses and will act quicker than the HTMLButtonElement.
Meaning, that the onClick-event gets fired on a mouseDown or keyDown event (native HTMLButtonElement emits on mouseUp).
Also, a keyDown event simulates the button as being pressed for at least 300ms, giving the user a better user-experience.
## How to use:
```js
const ReactDOM = require("react-dom"),
Button = require("itsa-react-button");
const handleClick = () => {
// ...
};
const button = ReactDOM.render(
<Button buttonText="Press me" onClick={handleClick} />,
document.getElementById("container")
);
button.focus();
// button.press() will press the button
```
You need the right css in order to make use of `itsa-react-button`. There are 2 options:
1. You can use the css-files inside the `css`-folder.
2. You can use: `Component = require("itsa-react-button/lib/component-styled.jsx");` and build your project with `webpack`. This is needed, because you need the right plugin to handle a requirement of the `scss`-file.
[](http://projects.itsasbreuk.nl/react-components/itsa-button/component.html)
[](http://projects.itsasbreuk.nl/react-components/itsa-button/api/)
Feel free to donate to one of these addresses; my thanks will be great :)
* Ether: 0xE096EBC2D19eaE7dA8745AA5D71d4830Ef3DF963
* Bitcoin: 37GgB6MrvuxyqkQnGjwxcn7vkcdont1Vmg