react-move-safe-button v1.0.1
React Move Safe Button
The motivation
It has been frustrating for me to mistakenly click a button which was sliding in the position of the button which I actually want to click. I figure out if the moved button was disabled for a second the user can just retry clicking without being distracted by unwanted action.
Developers might be able to implement this functionality by themselves, but it's somewhat tedious and I've never seen such a button, so I decided to build this and publish for other developers.
I chose React as the framework for this component because I'm a React developer and I believe it's most efficient to use most popular frontend framework to improve UX of many web applications all over the world.
I aimed to make this as simple as possible along with offering flexibility which most developers require when applying this to their projects.
Happy coding!
Demo for developers
You can try here!
How to use
You can learn how to use this component from Demo app code, E2E test code and JSDOC of the properties(you can check them out by hovering over props inside modern IDEs like VSCode).
NPM commands
yarn
or yarn install
Obviously you need to run this before running any other command.
yarn start:demo
Starts demo app.
yarn build
Builds the component for publishing to NPM.
yarn build:demo
Builds demo app for deploying to hosting server.
yarn test
Runs all of main E2E tests and supplemental unit tests.
yarn test:jest:dev
Runs unit tests which watch the changes(Run this along with touching component's code).
CYPRESS_RECORD_KEY=<cypress-cloud-project-key> yarn test:cypress:ci
Runs and upload the results to Cypress Cloud(Here is mine).
yarn test:cypress:open
Opens Cypress testing tools(Run this along with touching component's code).