Category: JavaScript

Categories
React Native Answers

How to add an image border shadow with React Native?

Labrador retriever puppy walking on green grass

To add an image border shadow with React Native, we add nested Vies with different background colors.

For instance, we write:

<View
  style={{
    flexGrow: 1,
    backgroundColor: Colors.white,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  }}
>
  <View
    style={[
      Theme.center,
      Theme.dropShadow,
      {
        top: -100,
        width: 190,
        height: 190,
        borderRadius: 190 / 2,
        backgroundColor: Colors.white,
      },
    ]}
  >
    <Image
      source={require("../../assets/resto/chef_jude.png")}
      style={[
        {
          width: 180,
          height: 180,
          borderRadius: 180 / 2,
        },
      ]}
    />
  </View>
</View>;

to set thr backgroundColor properies of the Views.

We set the inner one to have different top position to produce the shadow effect.

Categories
React Answers

How to add iconify into a React project?

Labrador retriever puppy walking on green grass

How to add iconify into a React project?

We install it with

npm install --save-dev @iconify/react @iconify-icons/cib

Then we import the library by adding

import { Icon, InlineIcon } from '@iconify/react';
import bitcoinIcon from '@iconify-icons/cib/bitcoin';
Categories
React Answers

How to preload images with React and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to preload images with React and JavaScript.

In this article, we’ll look at how to preload images with React and JavaScript.

How to preload images with React and JavaScript?

To preload images with React and JavaScript, we can create our own hook.

import { useEffect } from "react";

export const usePreloadImages = (imageSrcs) => {
  useEffect(() => {
    const randomStr = Math.random().toString(32).slice(2) + Date.now();
    window.usePreloadImagesData = window.usePreloadImagesData ?? {};
    window.usePreloadImagesData[randomStr] = [];
    for (const src of imageSrcs) {
      const img = new Image();
      img.src = src;
      window.usePreloadImagesData[randomStr].push(img);
    }
    return () => {
      delete window.usePreloadImagesData?.[randomStr];
    };
  }, [imageSrcs]);
};

We add the useEffect hook to store the images in the window.usePreloadImagesData property array.

The we create Image instances and push them to the array.

Once, the component unmounts, we clear window.usePreloadImagesData with

delete window.usePreloadImagesData?.[randomStr];
Categories
JavaScript Answers

How to Listen for Text Highlight in an HTML Element with JavaScript?

Sometimes, we want to listen for text highlight in an HTML element with JavaScript.

In this article, we’ll look at how to listen for text highlight in an HTML element with JavaScript.

Listen for Text Highlight in an HTML Element with JavaScript

To listen for text highlight in an HTML element with JavaScript, we can listen to the selectionchange event.

For instance, if we have the following div:

<div>  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus aliquam iaculis. Pellentesque interdum elit sapien, quis interdum enim laoreet sed. Mauris varius magna ac dapibus molestie. Sed porttitor sapien eget ipsum aliquet, lacinia venenatis lacus finibus. Phasellus in nibh mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat tristique augue, id lacinia massa iaculis eu. Donec sed vestibulum odio. Fusce sit amet congue odio, eu consequat neque. Sed sed mauris id sem malesuada blandit eu at quam.  
</div>

Then we can write:

document.addEventListener("selectionchange", event => {  
  const selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString();  
  console.log(selection);  
})

to listen to the selectionchange event on document , which means we pick up all text selection changes on the page.

In the event handler, we call getSelection to get the text selection if it exists.

Otherwise, we call document.selection.createRange().toString() to get the text selection.

Conclusion

To listen for text highlight in an HTML element with JavaScript, we can listen to the selectionchange event.

Categories
JavaScript Answers

How to Find the First Scrollable Parent Element with JavaScript?

girl crawling on white floor while smiling

Sometimes, we want to find the first scrollable parent element with JavaScript.

In this article, we’ll look at how to find the first scrollable parent element with JavaScript.

Find the First Scrollable Parent Element with JavaScript

To find the first scrollable parent element with JavaScript, we can recursively search for the parent that has scrollHeight bigger than clientHeight .

For instance, we can write the following HTML:

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus aliquam iaculis. Pellentesque interdum elit sapien, quis interdum enim laoreet sed. Mauris varius magna ac dapibus molestie. Sed porttitor sapien eget ipsum aliquet, lacinia venenatis lacus finibus. Phasellus in nibh mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat tristique augue, id lacinia massa iaculis eu. Donec sed vestibulum odio. Fusce sit amet congue odio, eu consequat neque. Sed sed mauris id sem malesuada blandit eu at quam.
    <div class="content">
      <span id='start'>Scroll me into view</span>
    </div>
  </div>
</div>

Then we write:

const getScrollParent = (node) => {
  if (node === null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

const span = document.querySelector('span')
const scrollable = getScrollParent(span)
console.log(scrollable)

to add the getScrollParent function that takes the HTML DOM node .

Then it checks if node.scrollHeight is bigger than node.clientHeight if the node isn’t null .

If it is, then it’s returned.

Otherwise, it calls getScrollParent with the node.parentNode to check the node up the DOM tree.

Then we call the function by getting the span with document.querySelector .

And then we call getScrollParent with it.

Therefore, we see that scrollable is the html element.

Conclusion

To find the first scrollable parent element with JavaScript, we can recursively search for the parent that has scrollHeight bigger than clientHeight .