useBlockPress (react-hook)

A react hook to help you take care of clicks loops by users and avoid conflicts in the backend with queries. ???
Remembering that if you want to read the article on Medium, here is the link: https://medium.com/@hubertryanofficial

$ yarn add react-blockpress-hook

or

$ npm install react-blockpress-hook --save

Quick Start

useBlockPress library was created to avoid a lot a clicks by bad users and take action on that user by identifying multiple clicks on a certain functionality.

As we use react’s own hooks, we recommend using the react version from 16.8 onwards, thus making it possible to use the useEffect and useState hooks.

How to apply

One of the examples is avoid bad users make a lot of queries trying to bug the app engine or something like that, that’s why the i developed this library hook. The first of all we need to specific two parameters of hook: onPress and onBlockPress. Below is saying more how we can use with examples!

...

import useBlockPress from "react-blockpress-hook";

const UseBlockButton = () => {
  const blockButtonClick = useBlockPress({
    onPress: onClick,
    onBlockButton: blockButtonListener,
  });

  function onClick() {
    console.log('Hello');
  }

  function blockButtonListener() {
    console.log('User onPress function blocked for some time.');
  }

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <TouchableOpacity onPress={blockButtonClick}>
        <View>
          <Text>Clique aqui</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

In this example I’m not specifying how long the user will be blocked after trying to bypass some function. I’m not specifying how long the user will be blocked after trying to bypass some function. In this hook I thought a lot about how we are going to control this or how we are going to take some action after the user tries to repeat it several times. So we have two more parameters that will help us with this, which are: maximumClick and seconds.

...

//

const blockButtonClick = useBlockButton({
    onPress: onClick,
    onBlockButton: blockButtonListener,
    maximumClicks: 10,
    seconds: 5000
  });

The third parameter tells us with how many clicks we will say that the user is cheating and we will have to take action so that if it is hit, the blockButtonListener function will be called. The fourth parameter tells us how long the user will be blocked after circumventing the maximum number of attempts or repetitions in a specific component that is executing this function.

The first parameter

Important: Obviously the first parameter will tell us which function will be called by the component, and then to pass the function that returns us from the hook to the component..

Below we have a spreadsheet that will help us a little more as we define these parameters.

You got it! ??

I hope I helped at least a little you developers.
Thank you very much, I hope I have helped the great React community. ❤?

GitHub

View Github