DEV Community: Ibelick

Just launched a collection of UI components and effects, crafted with React and Tailwind CSS

Ibelick — Wed, 07 Jun 2023 20:59:23 +0000

I've built most of them for my blog over the last month. Now, you can easily view and use them. Visit the component page, copy the code, paste into your project. And it's free of course 🙃

https://ui.ibelick.com

Crafting a modern spotlight effect with React and CSS

Ibelick — Fri, 26 May 2023 09:32:56 +0000

Note: This article was originally published on my personal blog. For more updates, follow me on Twitter @ibelick.

Recently, the spotlight effect has been increasingly popular in modern websites and apps, adding a touch of interactivity and delight to various elements, such as cards. This visually appealing effect draws users' attention to specific areas on a page, making the user interface more dynamic and engaging.

In this article, we'll explore how to create a modern spotlight effect using React + Tailwind CSS / vanilla CSS, and demonstrate how you can easily implement it in your own projects. Let's dive in!

The components

React + TailwindCSS

export const CardSpotlightEffect = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const [isFocused, setIsFocused] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!divRef.current || isFocused) return;

    const div = divRef.current;
    const rect = div.getBoundingClientRect();

    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleFocus = () => {
    setIsFocused(true);
    setOpacity(1);
  };

  const handleBlur = () => {
    setIsFocused(false);
    setOpacity(0);
  };

  const handleMouseEnter = () => {
    setOpacity(1);
  };

  const handleMouseLeave = () => {
    setOpacity(0);
  };

  return (
    <div
      ref={divRef}
      onMouseMove={handleMouseMove}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className="to-slate-950 relative max-w-md overflow-hidden rounded-xl border border-slate-800 bg-gradient-to-r from-slate-900 px-8 py-16 shadow-2xl"
    >
      <div
        className="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
        style={{
          opacity,
          background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(255,255,255,.06), transparent 40%)`,
        }}
      />
      <span className="mb-4 inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
        <svg
          className="h-6 w-6 text-white"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          aria-hidden="true"
        />
      </span>
      <h3 className="mb-2 font-medium tracking-tight text-white">Hello!</h3>
      <p className="text-sm text-slate-400">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex
        obcaecati natus eligendi delectus, cum deleniti sunt in labore nihil
        quod quibusdam expedita nemo.
      </p>
    </div>
  );
};

The component utilizes state variables to manage the spotlight's position, opacity, and focus state.

Event handlers are defined for the following scenarios:

Mouse movement (handleMouseMove): Update the spotlight's position based on the mouse coordinates relative to the card. Focus (handleFocus) and blur (handleBlur): Manage the spotlight's visibility by adjusting its opacity when the card gains or loses focus.
Mouse entering (handleMouseEnter) and leaving (handleMouseLeave): Make the spotlight visible only when the mouse is inside the card area.
The component renders a div element representing the card, and another div inside it to create the spotlight effect using a radial gradient background. The spotlight effect follows the mouse as it moves over the card, creating a dynamic and interactive appearance.

React + CSS

If you don't want to use Tailwind CSS, you can use the following CSS to achieve the same effect.

import React, { useRef, useState } from "react";
import "./CardSpotlightEffect.css";

export const CardSpotlightEffect = () => {
  const divRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e) => {
    if (!divRef.current || isFocused) return;

    const div = divRef.current;
    const rect = div.getBoundingClientRect();

    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleFocus = () => {
    setIsFocused(true);
    setOpacity(1);
  };

  const handleBlur = () => {
    setIsFocused(false);
    setOpacity(0);
  };

  const handleMouseEnter = () => {
    setOpacity(1);
  };

  const handleMouseLeave = () => {
    setOpacity(0);
  };

  return (
    <div
      ref={divRef}
      onMouseMove={handleMouseMove}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className="card-spotlight-effect"
    >
      <div
        className="spotlight"
        style={{
          opacity,
          background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(255,255,255,.06), transparent 40%)`,
        }}
      />
      <div>
        <span className="icon">{/* SVG icon here */}</span>
      </div>
      <h3 className="greeting">Hello!</h3>
      <p className="description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex
        obcaecati natus eligendi delectus, cum deleniti sunt in labore nihil
        quod quibusdam expedita nemo.
      </p>
    </div>
  );
};

.card-spotlight-effect {
  position: relative;
  max-width: 24rem;
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid #374151;
  background-image: linear-gradient(to right, #0f172a, #06171b);
  padding: 4rem 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.spotlight {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  opacity: 0;
  transition: opacity 300ms;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3b82f6;
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.greeting {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
}

.description {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

In this article, we've explored how to create a modern and engaging spotlight effect using React and CSS. By implementing this effect in your websites or apps, you can add a layer of interactivity that captures users' attention and elevates the overall user experience.

Remember, the spotlight effect isn't limited to just cards; you can apply it to various elements, such as input fields or buttons, to make your interface more dynamic and visually appealing. If you're interested in learning more about interactive effects, check out my previous article on
Creating an interactive spotlight border with CSS and React.

Feel free to experiment and adapt the techniques discussed in this tutorial to fit your specific design needs and preferences.

Creating an interactive spotlight border with CSS and React

Ibelick — Thu, 25 May 2023 09:12:54 +0000

Note: This article was originally published on my personal blog. For more updates, follow me on Twitter @ibelick.

I recently saw this effect this effect on the Base Hub website and I wanted to recreate it.

I'm providing a solution with React and Tailwind CSS, and one with CSS. I'll also explore more UI effects using this technique.

The component

React and Tailwind CSS solution

export const InputSpotlightBorder = () => {
  const divRef = useRef<HTMLInputElement>(null);
  const [isFocused, setIsFocused] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLInputElement>) => {
    if (!divRef.current || isFocused) return;

    const div = divRef.current;
    const rect = div.getBoundingClientRect();

    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleFocus = () => {
    setIsFocused(true);
    setOpacity(1);
  };

  const handleBlur = () => {
    setIsFocused(false);
    setOpacity(0);
  };

  const handleMouseEnter = () => {
    setOpacity(1);
  };

  const handleMouseLeave = () => {
    setOpacity(0);
  };

  return (
    <>
      <div className="relative w-80">
        <input
          onMouseMove={handleMouseMove}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          autoComplete="off"
          placeholder="Enter your email address"
          type="email"
          name="email"
          className="bg-neutral-950 h-12 w-full cursor-default rounded-md border border-slate-800 p-3.5 text-slate-100 transition-colors duration-500 placeholder:select-none  placeholder:text-neutral-500 focus:border-[#E47320] focus:outline-none"
        />
        <input
          ref={divRef}
          disabled
          style={{
            border: "1px solid rgb(228 115 32)",
            opacity,
            WebkitMaskImage: `radial-gradient(30% 30px at ${position.x}px ${position.y}px, black 45%, transparent)`,
          }}
          aria-hidden="true"
          className="border-[rgb(228 115 32)] pointer-events-none absolute left-0 top-0 z-10 h-12 w-full cursor-default rounded-md border bg-[transparent] p-3.5 opacity-0  transition-opacity duration-500 placeholder:select-none"
        />
      </div>
    </>
  );
};

The spotlight border effect is achieved by overlaying a second disabled input element with the same dimensions as the original input, positioned absolutely on top of the original input.

The effect is created by applying a radial-gradient mask to the overlay input's border. The gradient mask has a transparent outer region, creating a spotlight-like appearance. The component uses event listeners to handle mouse movement, focus, and blur events.

When the mouse moves over the input, the handleMouseMove function updates the position of the gradient mask based on the current mouse coordinates relative to the input element. The spotlight effect follows the mouse as a result.

When the input gains focus (handleFocus), the spotlight effect's opacity is set to 1, making it fully visible. When the input loses focus (handleBlur), the opacity is set back to 0, making the spotlight invisible. The onMouseEnter and onMouseLeave events ensure that the spotlight is only visible when the mouse is inside the input area.

React + CSS

If you don't want to use Tailwind CSS, you can use the following CSS to achieve the same effect.

import React, { useRef, useState } from "react";
import "./spotlightBorder.css";

export const InputSpotlightBorderCSS = () => {
  const divRef = useRef<HTMLInputElement>(null);
  const [isFocused, setIsFocused] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLInputElement>) => {
    if (!divRef.current || isFocused) return;

    const div = divRef.current;
    const rect = div.getBoundingClientRect();

    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  const handleFocus = () => {
    setIsFocused(true);
    setOpacity(1);
  };

  const handleBlur = () => {
    setIsFocused(false);
    setOpacity(0);
  };

  const handleMouseEnter = () => {
    setOpacity(1);
  };

  const handleMouseLeave = () => {
    setOpacity(0);
  };

  return (
    <div className="input-wrapper relative">
      <input
        onMouseMove={handleMouseMove}
        onFocus={handleFocus}
        onBlur={handleBlur}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        autoComplete="off"
        placeholder="Enter your email address"
        type="email"
        name="email"
        className="base-input"
      />
      <input
        ref={divRef}
        disabled
        style={{
          border: "1px solid rgb(228, 115, 32)",
          opacity,
          WebkitMaskImage: `radial-gradient(30% 30px at ${position.x}px ${position.y}px, black 45%, transparent)`,
        }}
        aria-hidden="true"
        className="overlay-input"
      />
    </div>
  );
};

.relative {
  position: relative;
}

.input-wrapper {
  width: 20rem;
}

.base-input {
  height: 3rem;
  width: 100%;
  cursor: default;
  border-radius: 0.5rem;
  border: 1px solid #2d3748;
  background-color: #1a202c;
  padding: 0.875rem;
  color: #cbd5e0;
  transition: border-color 0.5s;
  outline: none;
}

.base-input:focus {
  border-color: #e47320;
}

.base-input::placeholder {
  color: #718096;
  user-select: none;
}

.overlay-input {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  height: 3rem;
  width: 100%;
  cursor: default;
  border-radius: 0.5rem;
  background-color: transparent;
  padding: 0.875rem;
  opacity: 0;
  transition: opacity 0.5s;
}

More examples of spotlight borders

You can use this techniques on any element, not just inputs. For example on a card:

I saw a lot of spotlight effect recently, but never saw it on border specificaly. I think it's a really cool way to make a form (or anything else) more interactive. Let me know what you think!

Creating an animated text gradient with Tailwind CSS (and vanilla CSS)

Ibelick — Wed, 24 May 2023 09:02:03 +0000

Note: This article was originally published on my personal blog. For more updates, follow me on Twitter @ibelick.

Text gradients have become increasingly popular in modern web design, giving websites a fresh and dynamic look. One excellent example of this trend is Apple's iPhone 14 landing page, where they showcase a stunning animated text gradient.

Vanilla CSS

<span>hello, animated text gradient</span>

span {
  background: radial-gradient(
    circle at 100%,
    #b2a8fd,
    #8678f9 50%,
    #c7d2fe 75%,
    #9a8dfd 75%
  );
  font-weight: 600;
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedTextGradient 1.5s linear infinite;
}

@keyframes animatedTextGradient {
  to {
    background-position: 200% center;
  }
}

What we do here is:

background: radial-gradient(...): Creates a radial gradient with a circle at 100%, using the specified color stops.
background-size: 200% auto: Sets the background size to 200% width and automatically adjusts the height.
background-clip: text: Clips the background to the text content.
-webkit-text-fill-color: transparent: Makes the text fill transparent (for webkit-based browsers).
animation: animatedTextGradient 1s linear infinite: Applies the animatedTextGradient animation with a duration of 1s, a linear timing function, and infinite repetition.
@keyframes rule defines the animatedTextGradient animation, which animates the background position from its initial value to 200% center, creating a smooth gradient movement effect.

Tailwind CSS

If you prefer using Tailwind CSS, here's the equivalent code written with React:

module.exports = {
  theme: {
    extend: {
      animation: {
        "text-gradient": "text 1.5s linear infinite",
      },
      keyframes: {
        text: {
          to: {
            backgroundPosition: "200% center",
          },
        },
      },
    },
  }

Then we use our animate-text-gradient, we use a background image with a linear gradient with the same color stops as the previous example, and we set the background size to 200% auto, the background clip to text, and the text color to transparent.

export const AnimatedTextGradientTW: React.FC = () => {
  return (
    <span
      className="animate-text-gradient bg-gradient-to-r from-[#b2a8fd] via-[#8678f9] to-[#c7d2fe] 
    bg-[200%_auto] bg-clip-text text-transparent"
    >
      hello, animated text gradient
    </span>
  );
};

Feel free to experiment and adapt the techniques discussed in this tutorial to fit your specific design needs and preferences.

Creating an animated gradient border with CSS

Ibelick — Wed, 24 May 2023 08:41:58 +0000

Note: This article was originally published on my personal blog. For more updates, follow me on Twitter @ibelick.

In this article, I'll share methods for creating an animated gradient border with CSS. You can easily customize the border color, animation speed, border size, and border radius with theses techniques.

Code

Property and background clip

We use the @property rule, it comes with limited supports you can check the brower support here caniuse.
For a more supported method, you can go to the end of the article.

<div class="box">{children}</div>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  height: 400px;
  width: 400px;
  border: 3px solid #0000;
  border-radius: 12px;
  background: linear-gradient(#131219, #131219) padding-box, linear-gradient(
        var(--angle),
        #070707,
        #687aff
      ) border-box;
  animation: 8s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

To achieve our desired effect, we'll use the following CSS properties:

border: This property creates a 1px wide, solid, transparent border around the box.
border-radius: This property gives the box rounded corners with a 12px radius.
background: This property creates a two-layered background using two linear gradients. The first gradient is a solid color (#000) that fills the box's padding area. The second gradient creates the shiny effect and is animated using the custom property --angle. The gradient is applied to the box's border area. We use the backgroud-clip property to specify that the background should be clipped to the padding box.
animation: This property applies the "rotate" animation to the box. It has an 8-second duration, uses linear easing, and repeats infinitely.
@keyframes rotate: This keyframe animation block specifies the end state of the "rotate" animation, where the custom property --angle is set to 360deg.
@property --angle: This part of the code defines the custom property --angle using the CSS Houdini @property rule. It specifies the expected syntax (angle), the initial value (0deg), and that the property does not inherit from parent elements.

Tailwind CSS

If you prefer using Tailwind CSS, here's the equivalent code written with React and TypeScript:

export const AnimatedGradientBorderTW: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const boxElement = boxRef.current;

    if (!boxElement) {
      return;
    }

    const updateAnimation = () => {
      const angle =
        (parseFloat(boxElement.style.getPropertyValue("--angle")) + 0.5) % 360;
      boxElement.style.setProperty("--angle", `${angle}deg`);
      requestAnimationFrame(updateAnimation);
    };

    requestAnimationFrame(updateAnimation);
  }, []);

  return (
    <div
      ref={boxRef}
      style={
        {
          "--angle": "0deg",
          "--border-color": "linear-gradient(var(--angle), #070707, #687aff)",
          "--bg-color": "linear-gradient(#131219, #131219)",
        } as CSSProperties
      }
      className="flex h-[400px] w-[400px] items-center justify-center rounded-lg border-2 border-[#0000] p-3 [background:padding-box_var(--bg-color),border-box_var(--border-color)]"
    >
      {children}
    </div>
  );
};

In this implementation, we handle the animation using JavaScript. We utilize the requestAnimationFrame function to update the custom property --angle every 16ms (60fps).

CSS Pseudo-Elements

If you want to support more browsers, you can use the following method instead:

.box__bg {
  position: relative;
  z-index: 0;
  height: 400px;
  width: 400px;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
}

.box__bg::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: 100%100%, 50%50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#070707, #687aff);
  animation: bgRotate 4s linear infinite;
}

.box__bg::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: linear-gradient(#06021d, #06021d);
  border-radius: 12px;
}

@keyframes bgRotate {
  100% {
    transform: rotate(1turn);
  }
}

This technique uses ::before and ::after pseudo-elements to create the border and background layers, respectively. The ::before pseudo-element contains the animated gradient, rotating infinitely over 4 seconds using the bgRotate keyframes. The ::after pseudo-element is positioned above the gradient layer and sets the background color. The div itself has a fixed size, border-radius, and padding, with its overflow hidden to ensure the animated border is contained within the specified area.

Here we explore a few different ways to animate borders in CSS.
I recommend this article if you want to dive deeper into the topic.
Feel free to experiment and adapt the techniques discussed in this tutorial to fit your specific design needs and preferences. Let's connect on Twitter @ibelick ✌️

Creating Bento Grid Layouts with CSS (Tailwind CSS)

Ibelick — Tue, 09 May 2023 06:11:49 +0000

Note: This article was originally published on my personal blog. For more updates, follow me on Twitter @ibelick.

As you browse the web, you've likely come across this type of layout before. It can be called a bento grid layout, bento box layout, or bento box grid. This layout takes its inspiration from the traditional Japanese bento box. 🍱

Bento grids are super versatile, perfect for displaying all sorts of content like images, text, mixed media, and more. They showcase loads of content in a compact and organized way, making your website or app look clean and engaging.

Trends and examples

Some people say that it start with Windows 8 and the metro design.

However, the true trendsetter in recent times is Apple.
They've been using bento grid layouts extensively in their video presentations and on their website, making it a popular design choice.

Apple 14

If you're looking for design inspiration you can check bentogrids. It's a curated collection showcasing the best bento grid layouts on the web.

Building a Bento Grid: Step-by-Step Code

There are countless ways to create bento grid layouts, and today, I'll show you some of them using Tailwind CSS and React.

Note that the code examples provided are not responsive by default, as they
are intended to be easily viewed on mobile devices too. If you want to make
them responsive, you can simply add breakpoints to adjust the layout for
different screen sizes.

Using CSS Grid

One approach to building a bento grid is using CSS Grid, along with grid-template-columns, grid-auto-rows, and grid-row. Check out this example:



<div className="grid auto-rows-[192px] grid-cols-3 gap-4">
  {[...Array(7)].map((_, i) => (
    <div
      key={i}
      className={`row-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900 ${
        i === 3 || i === 6 ? "col-span-2" : ""
      }`}
    ></div>
  ))}
</div>

We make the 3rd and 6th items span two columns on medium screens and up using the md:col-span-2 utility.

Using CSS Columns

If the order of the items doesn't matter, and if you need it in columns you can opt for a multi-column layout using column-count, column-gap, and margin-bottom on the items.



<div className="columns-1 gap-4">
  {[24, 32, 36, 32, 32, 32, 16, 16, 64].map((height, index) => (
    <div
      key={index}
      className={`mb-4 h-${height} break-inside-avoid rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900`}
    />
  ))}
</div>

The array contains the height of each card component. Alternatively, you can use a full height and let the children components set the card height.

Using CSS Flexbox

Just like with columns, flexbox is a great option too. You can use flex-wrap, flex-grow, and margin-bottom on the items.



<div className="flex gap-4">
  {[
    [24, 32, 32, 16, 16],
    [32, 40, 56],
    [64, 32, 32],
  ].map((card, index) => (
    <div className="flex-1" key={index}>
      {card.map((height, index) => (
        <div
          className={`mb-4 h-${height} rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900`}
          key={index}
        ></div>
      ))}
    </div>
  ))}
</div>

The code uses an array to store the heights of the cards in each column. The first element of the array is an array of the heights of the cards in the first column, the second element is an array of the heights of the cards in the second column, and so on.
Again, you can use a full height and let the children components set the card height.

We've covered some of the most common ways to create a bento grid, but there are loads of other methods depending on your needs.

If you're curisous to learn more, dive into CSS Grid and Flexbox to discover even more possibilities.

Thanks for reading!

How to compress images on client-side

Ibelick — Tue, 12 Apr 2022 20:11:43 +0000

Optimizing images on the web is a common thing. For hellocurator, we want to optimize images before the upload, we can do it without servers, on the client-side.

The Canvas element let manipulate images with Javascript quite easily.
We can found a lot of code examples about how to compress image with the Canvas API.

I will use compressorjs, a tiny librarie (3.8 kB minzipped).
Compressor.js uses the Browser's native HTMLCanvasElement.toBlob() API to do the compression work, which means it is lossy compression.

There's a live Demo to play with it.

The code

In some case, I like to wrap dependencies in my projects.
So the code looks like:

import Compressor from "compressorjs";

export const compress = async (
  file: File,
  quality: number,
  maxHeight: number,
  maxWidth: number,
  convertSize?: number
): Promise<File | Blob> => {
  return await new Promise((resolve, reject) => {
    new Compressor(file, {
      quality,
      maxHeight,
      maxWidth,
      convertSize,
      success: resolve,
      error: reject,
    });
  });
};

You can use more options, as provided in the GitHub repo.

And, to use it

const upload async = (data) => {
  const file = data.image[0];
  const compressedFile = await compress(file, 0.6, 2000, 2000, 1000);
  const imageUploaded = await upload(compressedFile);
  ...
}

GitHub Gist

Post on my website

Tiny react hook to upload files into IPFS

Ibelick — Tue, 12 Apr 2022 20:02:41 +0000

For hellocurator we want to let users upload an image through our application. The solution of choice for decentralized storing is IPFS.

IPFS is a distributed system for storing and accessing files, websites, applications, and data.
I recommend reading the doc if you want to know more about the concepts.

Since our app is written in Next.js, we will use React with a custom hook. But you can take the functionality with any other JavaScript framework.

The code

We will use the ipfs-http-client library.

npm i ipfs-http-client

import { create } from "ipfs-http-client";
import { ImportCandidate } from "ipfs-core-types/src/utils";

const client = create({ url: "https://ipfs.infura.io:5001/api/v0" });

const useIpfs = () => {
  const upload = async (file: ImportCandidate) => {
    try {
      const added = await client.add(file);
      const url = `https://ipfs.infura.io/ipfs/${added.path}`;

      return url;
    } catch (error) {
      console.error("Error uploading file: ", error);
    }
  };

  return {
    upload,
  };
};

export default useIpfs;

The basic functionality takes 3 lines of code:

create a client with a gateway. There are different types of gateway for IFPS. For our example, we use a free one by infura.io, but you can use other services or create your own.
Import a file or data into IPFS
Get the path of the stored file

You can use this hook for storing anything you want on IPFS.

const onSubmit: SubmitHandler<FormValues> = async (data) => {
  const image = data.image[0];

  /* upload an image */
  const imageUrl = await upload(image);

  /* upload a file */
  const fileUrl = await upload(data.file);

  /* upload a text */
  const textUrl = await upload("hello!");

  /* upload a JSON */
  const jsonUrl = await upload(
      JSON.stringify({
      title: "hellocurator",
      description: "We’re happy to introduce hellocurator",
    })
  );

  /* etc. */
};

GitHub Gist

Post on my website

Best analytics tools for react-native

Ibelick — Thu, 06 Feb 2020 13:05:17 +0000

Hey guys,
I make a react-native (expo) + firebase application, and I need analytics to better understand users.

What are the best tools on the market?