DEV Community: Rakhi

I wrote an online iframe editor in React

Rakhi — Sun, 25 Apr 2021 20:12:41 +0000

Earlier this month, when I was writing my first blog post on this platform, I wanted to edit one of the iframes I was trying to embed in my blog. I was very surprised to see I couldn't find any dedicated online tool to test or edit the iframe. I ended up being annoyed by this idea.

So, I wrote an online iframe editor. Check it out iframe-editor

Check it out on github online-iframe-editor

It provides the following functionalities:

Test your iframe
Edit your iframe
Build your own iframe

If you would like to contribute or have any suggestion checkout the guidelines here

Implement your own custom hook in React with typescript

Rakhi — Sun, 25 Apr 2021 12:15:50 +0000

As a beginner, thinking about creating a custom hook sounded very complex to me. As I spent more time working with them, I realized it isn't that complicated after all.

In this blog post I am going to take a very simple example and create my own custom hook out of it.

I wrote a blog post recently about creating a toggle button in React here. In this blog post I am going to convert my toggle function into a react hook.

Why am I writing this hook for this small function, is it even needed?

I want to show you how to create your own custom hook by giving you a simple example.
Having a custom hook is useful as it hides information, which means you are utilizing encapsulation.
It separates logic from the component. Your components will be super clean that way.
Writing hooks means you are testing more and your code is more flexible. You can extend functionality without changing any component, in case the requirement changes as it always happens!

Let's go!

If you read my blog Creating a Toggle button in React, you are good to continue reading. If not, I would highly recommend reading it, it will take <2 mins. I promise this blog post will look easier afterwards.

Now, that you have read my previous blog post, you might have noticed my code for creating a toggle button looks like this:

In order to create a custom hook out of it, we need to follow these steps:

Create a folder name Hooks and inside it create a file called useToggle.ts (remember all hook names start with use, let's keep the consistency)
Implement the handler method in useToggle file.
Use the useToggle hook in your component.

Let get started then!

Step 1. Create Hooks folder and a file inside it, name it as useToggle.ts.

Step 2. Implement toggle handler function in the useToggle.ts file:

Add a state:

  const [state, setState] = useState("off");

Write the handler function:

  const handlers = () => ({
    toggle: () => {
      setState((res) => (res === "on" ? "off" : "on"));
    }
  });

Memoize the handler function using useMemo:

  const handlers = useMemo(
    () => ({
      toggle: () => {
        setState((res) => (res === "on" ? "off" : "on"));
      }
    }),
    []
  );
};

Now you must be wondering why we needed to memoize the function here? By using useMemo we are making sure our function remembers the result of the last time it was called. It also comes in very handy in performance optimizations.

Step 3. Use the hook useToggle in the component:

const [toggleState, { toggle }] = useToggle();

That's all.

Here is how our useToggle hook looks like at the end.

Here is how our component looks at the end:

Bookmark it in case you need it later or feel free to reach out atbrakhi

Creating a Toggle button in React

Rakhi — Fri, 02 Apr 2021 13:09:22 +0000

Lately I was working on a problem where I had to toggle something in React JS and I couldn't find a simple 1-2 liner solution for that, like we have in Jquery. If you have ever used it, you probably know what I am talking about.

Note: I am not trying to compare Jquery and React here. They both serve their purpose very well.

Let's take an example. We will create a button that changes the text from Off to On and vice-versa with one click of a button.

Let's talk through this example step by step:

Create a button - we will use material-UI for that.
Create a state that will hold the On/Off value.
Show On/Off text once user clicks the button.
If the text says On and user clicks the button, it should change the text to Off and vice-versa.

Step 1: Create a button

<Button variant="contained" color="primary">
    Toggle
</Button>

Step 2: Create a state that will hold value On/Off:

const [textState, setTextState] = useState("off");

We are taking Off as initial state to avoid any kind of code smell.

Step 3: Show On/Off text on click of the button.

This part involves two small but important steps:

A text that changes with the click of the button
A function to handle the toggle when user clicks on the button

So, let's pass the text first, buttonState will give us Off by default as it is our initial state:

 <h3>{textState}</h3>

Add the Handler function:

const toggleText = () => {
    setTextState((state) => (state === "On" ? "Off" : "On"));
};

We are updating the state of the button here. If it is On, change it to Off and if it is Off, change it to On.

Step 4: Toggle, to achieve this we only need to pass our handler function to the onClick of <Button> from step 1. Like this:

<Button variant="contained" color="primary" onClick={toggleText}>
    Toggle
</Button>

And that's all! Here is how it looks when we put all the above code together:

JavaScript Array.some() or Array.every()?

Rakhi — Thu, 01 Apr 2021 18:58:09 +0000

I recently started using array.some() and at the same time also found array.every() interesting. It saved time for me, might do the same to you!

We will talk about both methods here.

Array.some()

It will return True if any element matches the required condition.
You would want to use this method in case you want to check if at least one of the elements in the array matches the constraints.
Array.some() will always return false if the array is empty. But then we ask why so? It is because array.some() returns true if at least one element of an array passes your condition. If the array is empty, none of the elements pass the condition and hence it returns false.

Let's check out Array.some() examples:

Check if there is a negative number in the array:

Check if value exists in the array:

What if there is an empty array and you also need to use array.some()? It is possible to do that but note it will always return False as mentioned before:

Array.every()

It returns True if all the elements in the array match your condition.
You would want to use this method in case you want to check if all the elements in the array match your condition.
It returns True if the array is empty. Then we again ask, hey, why? It is because array.every() returns true if every element of an array passes the condition. If there are no items in the array, every element in the array passes the condition, hence it returns true.

Let's check out Array.every() examples:

Check if every number in array is negative:

For empty array it will always return True: