Forem: Sohanur Rahman Emon

Customizing Parent Style from a Child Component in React

Sohanur Rahman Emon — Fri, 06 Dec 2024 16:42:36 +0000

There might be scenarios where a child component needs to customize the style of its parent element. You can achieve it using a ref. A ref is simply a function in React that allows you to access a DOM element when it is attached to the DOM.

It's important to note that directly modifying the style of a parent component from a child is not possible through standard CSS. While the :has() CSS selector can conditionally style a parent based on a child, it must still be applied from the parent component itself, not the child.

Here’s a practical example where a child component removes padding from its parent element:

const Child = () => {
  return (
    <div
      ref={(childElement) => {
        if (childElement) {
          childElement.parentElement!.style.padding = "0"; // Remove padding from the parent
        }
      }}
    >
      I am the child
    </div>
  );
};

const Parent = () => {
  return (
    <div style={{ padding: "20px", border: "1px solid black" }}>
      <Child />
    </div>
  );
};

How Does This Work?

What is ref?
- ref is a React prop that allows you to access a DOM element after it is mounted (added to the DOM).
When Does It Run?
- The ref function runs when the DOM element is attached.

This approach is quick and works for specific use cases where you need to make minor adjustments to parent styles from a child component.

CSS Attribute Selector - Simplified

Sohanur Rahman Emon — Sat, 23 Dec 2023 07:55:52 +0000

CSS attribute selectors are powerful and versatile tools that allow developers to select elements based on their attributes. In this article, we will explore various attribute selectors and provide clear examples to help you understand their usage. Let's dive in!

[attribute]

The [attribute] selector selects elements that have the specified attribute. For instance, if we have a HTML element with the attribute "data-custom", we can select it like this:

[data-custom] {
  /* CSS rules */
}

Example usage: Suppose we have a button with the attribute "data-button". We can style it using the following CSS:

[data-button] {
  background-color: yellow;
  border-radius: 10px;
  color: black;
}

[attribute="value"]

The [attribute="value"] selector selects elements that have the specified attribute with an exact value. For example, if we have a HTML element with the attribute "data-custom" set to "any", we can select it like this:

[data-custom='any'] {
  /* CSS rules */
}

Example usage: Let's say we have a button with the attribute "data-button" set to "blue". We can style it using the following CSS:

[data-button='blue'] {
  background-color: blue;
  border-radius: 10px;
  color: white;
}

[attribute^="value"]

The [attribute^="value"] selector selects elements that have the specified attribute with a value starting with a specific string. For example, if we have a HTML element with the attribute "href" starting with "https://www", we can select it like this:

[href^="https://www"]
{
  /* CSS rules */
}

[attribute$="value"]

The [attribute$="value"] selector selects elements that have the specified attribute with a value ending with a specific string. For instance, if we have a HTML element with the attribute "src" ending with ".png", or a element has class name like "css34-34sf3d-option" we can select it like this:

[src$='.png'] {
  /* CSS rules */
}

[class$='option'] {
  /* CSS rules */
}

[attribute~="value"]

The [attribute~="value"] selector selects elements that have the specified attribute with a value containing a specific word. For instance, if we have a HTML element with the attribute "class" set to "btn outline primary", we can select it like this:

[class~='primary'] {
  /* CSS rules */
}

But it won't work for element with the attribute "class" set to "btn-primary". Because ~ is used as word selector not substring selector.

[class~='primary'] {
  /* CSS rules */
}

[attribute*="value"]

The [attribute*="value"] selector selects elements that have the specified attribute with a value containing a specific substring. For example, if we have a HTML element with the attribute "alt" containing the word "logo", we can select it like this:

[alt*='logo'] {
  /* CSS rules */
}

These are some of the commonly used CSS attribute selectors. By utilizing them effectively, you can target specific elements based on their attributes and achieve the desired styling or functionality. Experiment with these selectors to enhance your CSS skills and make your web development more dynamic and interactive.

The Regex Cheat Sheet for JavaScript Developers

Sohanur Rahman Emon — Thu, 07 Dec 2023 05:29:38 +0000

Regex (Regular Expressions) are powerful tools for pattern matching and text manipulation. They provide a concise and flexible way to describe complex search patterns. In this cheat sheet, we'll cover essential regex concepts with practical examples for JavaScript developers.

Anchors

Anchors are used to specify the position in the string where a match must occur.

const startOfString = /^regex/;
const endOfString = /pattern$/;
const wordBoundary = /\bword\b/;

^: Matches the start of the string.
$: Matches the end of the string.
\b: Matches a word boundary.

Example:

console.log(startOfString.test('regex example')); // true
console.log(endOfString.test('example pattern')); // true
console.log(wordBoundary.test('word boundary')); // true

Character Classes

Character classes define sets of characters to match.

const digitClass = /\d/;
const notWhiteSpace = /\S/;
const hexDigit = /\x1F/;

\d: Matches any digit.
\S: Matches any non-whitespace character.
\x: Matches a hexadecimal character.

Example:

console.log(digitClass.test('abc123')); // true
console.log(notWhiteSpace.test('no whitespace')); // true
console.log(hexDigit.test('hex 1F')); // true

Quantifiers

Quantifiers define the number of occurrences of a character or group.

const zeroOrMore = /a*/;
const oneOrMore = /b+/;
const threeOrMore = /c{3,}/;

*: Matches 0 or more occurrences.
+: Matches 1 or more occurrences.
{3,}: Matches 3 or more occurrences.

Example:

console.log(zeroOrMore.test('aaa')); // true
console.log(oneOrMore.test('bb')); // true
console.log(threeOrMore.test('cccc')); // true

Escape Sequences

Escape sequences are used to match special characters literally.

const escapeChar = /\//;
const literalSequence = /\Qspecial\E/;

/: Matches a literal '/'.
\Q...\E: Matches the literal sequence between \Q and \E.

Example:

console.log(escapeChar.test('a/b')); // true
console.log(literalSequence.test('special word')); // true

Groups and Ranges

Groups and ranges help organize and match sets of characters.

const anyCharacter = /./;
const aOrB = /(a|b)/;
const nonCapturingGroup = /(?:x|y)/;
const rangeABC = /[a-c]/;
const notABC = /[^a-c]/;

.: Matches any character except newline.
(a|b): Matches 'a' or 'b'.
(?:x|y): Non-capturing group.
[a-c]: Matches 'a', 'b', or 'c'.
[^a-c]: Matches any character except 'a', 'b', or 'c'.

Example:

console.log(anyCharacter.test('a\nb')); // true
console.log(aOrB.test('a')); // true
console.log(nonCapturingGroup.test('x')); // true
console.log(rangeABC.test('b')); // true
console.log(notABC.test('d')); // true

Special Characters

Special characters represent common characters.

const newLine = /\n/;
const tab = /\t/;
const hexChar = /\x1A/;

\n: Matches a newline character.
\t: Matches a tab character.
\x: Matches a hexadecimal character.

Example:

console.log(newLine.test('line\nbreak')); // true
console.log(tab.test('indented\tline')); // true
console.log(hexChar.test('\x1A')); // true

Pattern Modifiers

Modifiers affect how the pattern is applied.

const globalMatch = /pattern/g;
const caseInsensitive = /case/i;
const multiLine = /^start/m;
const singleLine = /line$/s;
const commentsWhitespace = /pattern/x;

g: Global match.
i: Case-insensitive.
m: Multiple lines.
s: Treats the string as a single line.
x: Allows comments and whitespace in the pattern.

Example:

console.log(globalMatch.exec('pattern pattern')); // ['pattern', 'pattern']
console.log(caseInsensitive.test('CaseInsensitive')); // true
console.log(multiLine.test('start\nline')); // true
console.log(singleLine.test('multi\nline')); // true
console.log(commentsWhitespace.test('pattern with spaces')); // true

Assertions

Assertions define conditions for a match without consuming characters.

const lookaheadAssertion = /foo(?=bar)/;
const negativeLookahead = /foo(?!bar)/;
const lookbehindAssertion = /(?<=foo)bar/;
const negativeLookbehind = /(?<!foo)bar/;

(?=bar): Lookahead assertion.
(?!bar): Negative lookahead.
(?<=foo)bar: Lookbehind assertion.
(?<!foo)bar: Negative lookbehind.

Example:

console.log(lookaheadAssertion.test('foobar')); // true
console.log(negativeLookahead.test('foo123')); // true
console.log(lookbehindAssertion.test('foobar')); // true
console.log(negativeLookbehind.test('123bar')); // true

In conclusion, mastering regular expressions is a valuable skill for any JavaScript developer. This cheat sheet covers essential regex concepts and provides practical examples for better understanding. Use it as a quick reference when crafting powerful search patterns in your JavaScript projects.

Event Handling with TypeScript in React: Two ways

Sohanur Rahman Emon — Thu, 26 Oct 2023 02:19:30 +0000

Handling events in a React application is a fundamental part of creating interactive and dynamic user interfaces. With TypeScript, you can take advantage of static typing to catch potential errors at compile time, making your code more robust. In this blog, we'll explore two ways of handling events in React using TypeScript

Explicit Type Annotations

import * as React from 'react';

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  e.preventDefault();
  console.log('Input value:', e.target.value);
};

const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    console.log('Enter key pressed');
  }
};

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
  console.log('Button clicked');
};

const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  console.log('Form submitted');
};

function EventHandlingExplicit() {
  return (
    <div>
      <input type="text" onChange={handleInputChange} onKeyDown={handleKeyPress} />
      <button onClick={handleClick}>Click me</button>
      <form onSubmit={handleFormSubmit}>
        <button type="submit">Submit Form</button>
      </form>
    </div>
  );
}

export default EventHandlingExplicit;

In this example, we've added specific event handlers for ChangeEvent, KeyboardEvent, MouseEvent, and FormEvent.

Using `EventHandler` Functions

import * as React from 'react';

const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  e.preventDefault();
  console.log('Input value:', e.target.value);
};

const handleKeyPress: React.KeyboardEventHandler = (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    console.log('Enter key pressed');
  }
};

const handleClick: React.MouseEventHandler = (e) => {
  e.preventDefault();
  console.log('Button clicked');
};

const handleFormSubmit: React.FormEventHandler = (e) => {
  e.preventDefault();
  console.log('Form submitted');
};

function EventHandlingImplicit() {
  return (
    <div>
      <input
        type="text"
        onChange={handleInputChange}
        onKeyDown={handleKeyPress}
      />
      <button onClick={handleClick}>Click me</button>
      <form onSubmit={handleFormSubmit}>
        <button type="submit">Submit Form</button>
      </form>
    </div>
  );
}

export default EventHandlingImplicit;

In this approach, we've continued to use MouseEventHandler for mouse events and explicitly specified the KeyboardEvent for keypress handling. You can extend this pattern for other event types, such as FormEvent, as needed.

Both of these approaches allow you to handle various event types with TypeScript in a type-safe manner.

Happy Coding

Darken image with tailwind css.

Sohanur Rahman Emon — Fri, 02 Sep 2022 04:09:18 +0000

Sometimes making the background image darken becomes difficult for the newbies.

Let us simplify that even with a css framework like tailwind css.

Considering the following
code:

snapshot:

Now let us make this darken by adding brightness filter.
code:

snapshot:

As simple as that. This is more than easy.

DRY

Sohanur Rahman Emon — Fri, 08 Apr 2022 13:12:52 +0000

don't repeat yourself

Forem: Sohanur Rahman Emon

Customizing Parent Style from a Child Component in React

How Does This Work?

CSS Attribute Selector - Simplified

[attribute]

[attribute="value"]

[attribute^="value"]

[attribute$="value"]

[attribute~="value"]

[attribute*="value"]

The Regex Cheat Sheet for JavaScript Developers

Anchors

Character Classes

Quantifiers

Escape Sequences

Groups and Ranges

Special Characters

Pattern Modifiers

Assertions

Event Handling with TypeScript in React: Two ways

Explicit Type Annotations

Using EventHandler Functions

Darken image with tailwind css.

DRY

Using `EventHandler` Functions