DEV Community: Bradley Dirheimer

Artificial Intelligence and Machine Learning in Web Development

Bradley Dirheimer — Mon, 22 Apr 2024 03:56:51 +0000

Introduction

Artificial Intelligence (AI) and Machine Learning (ML) are reshaping the landscape of web development, transforming the way users interact with web applications. These technologies enable sophisticated features such as personalized user experiences, automated customer support via chatbots, and advanced image recognition capabilities. This article explores the integration of AI and ML in web development, focusing on popular tools like TensorFlow.js and their practical applications.

Personalization through AI and ML

One of the most impactful applications of AI and ML in web development is personalization. By leveraging user data and behavior patterns, ML algorithms can customize website content, recommendations, and advertisements to individual user preferences. TensorFlow.js, an open-source library that brings ML capabilities to the web, allows developers to train and deploy models directly in the browser. This enables real-time personalization, such as dynamically adjusting content or recommendations based on user interactions without the need for backend computations.

Automated Customer Support: Chatbots

AI-powered chatbots have revolutionized customer service in web environments. These chatbots use natural language processing (NLP) and machine learning to understand and respond to customer inquiries effectively. TensorFlow.js supports the development of such models, enabling chatbots to learn from interactions and improve over time. This not only enhances user experience but also reduces the workload on human customer service representatives by handling routine inquiries and filtering out more complex issues that require human intervention.

Image Recognition Technologies

Image recognition is another area where AI and ML have made significant inroads. Web applications can now use ML to analyze images for various purposes, such as facial recognition, object detection, and automated tagging. TensorFlow.js provides tools that enable developers to incorporate image recognition functionalities directly into web applications, facilitating features like photo-based search, user verification, and interactive media.

Tools and Frameworks

In addition to TensorFlow.js, other tools and frameworks support AI and ML in web development. Libraries such as Brain.js provide simpler neural network implementations, suitable for smaller-scale applications or those with less complex data sets. Moreover, APIs like Microsoft Azure Cognitive Services or Google Cloud AI offer ready-to-use models that can be easily integrated into web applications, speeding up development and deployment.

Conclusion

The integration of AI and ML into web development is not just a trend but a transformative shift that enhances the interactivity and intelligence of web applications. With tools like TensorFlow.js, developers are equipped to build more personalized, responsive, and intelligent web applications. As technology advances, the scope of AI and ML in web development will undoubtedly expand, paving the way for more innovative and user-focused solutions.

Exploring Bitwise Operators: From JavaScript to TypeScript Enhancements

Bradley Dirheimer — Mon, 22 Apr 2024 03:38:42 +0000

Bitwise operators are a foundational aspect of programming, enabling direct manipulation of individual bits within an integer's binary representation. In web development, JavaScript provides this low-level access, which is crucial for performance-critical applications. However, when TypeScript is added to the mix, it enhances these operations with strong typing and advanced features that lead to safer and more maintainable code. This blog post will delve into the workings of bitwise operators in JavaScript, compare their usage with TypeScript, and discuss the additional benefits TypeScript offers.

Bitwise Operators in JavaScript

JavaScript supports several bitwise operators, which operate directly on the 32-bit integer representations of numbers. These operators are essential for tasks that involve flags, masks, or where performance optimization is crucial, such as in graphics programming or real-time processing.

The Operators

AND (&): Sets each bit to 1 if both bits are 1.
OR (|): Sets each bit to 1 if one of the bits is 1.
XOR (^): Sets each bit to 1 if only one of the bits is 1 and the other is 0.
NOT (~): Inverts all the bits.
Left Shift (<<): Shifts all bits to the left, filling 0 on the right.
Sign-Propagating Right Shift (>>): Shifts bits to the right, preserving the sign.
Zero-Fill Right Shift (>>>): Shifts bits to the right, filling 0 on the left.

These operators are powerful but come with a caveat in JavaScript due to the language's type system and automatic type coercion, which can lead to unintended results if not handled carefully.

Enhancing Bitwise Operations with TypeScript

TypeScript builds on JavaScript, adding static types and enums, which enhance the clarity and reliability of bitwise operations. Here’s how TypeScript improves upon JavaScript’s capabilities:

Static Typing

TypeScript’s static type system allows for defining the types of variables explicitly. This feature can prevent many common bugs in JavaScript, such as those caused by unexpected type coercion. In the context of bitwise operations, this means you can ensure that only numbers are used in places where bitwise operations make sense, reducing runtime errors and improving code quality.

Enums for Bitwise Flags

TypeScript's enum is a way of giving more friendly names to sets of numeric values. This is especially useful in the case of flags or masks used with bitwise operators. TypeScript enums can be more expressive and safer compared to plain numeric constants in JavaScript.

Example: FileAccess Permissions

Consider an example using TypeScript enums to define file access permissions, illustrating the application of bitwise operations:

enum FileAccess {
    None = 0,
    Read = 1 << 1,    // 2
    Write = 1 << 2,   // 4
    ReadWrite = Read | Write  // 6
}

This makes the code more readable and maintainable, especially when combined with TypeScript's static checking.

Enhanced Safety and Maintainability

TypeScript's compiler performs checks based on the types and will issue compile-time errors if bitwise operations are used incorrectly. This leads to safer and more robust code, particularly in large codebases or in applications where reliability is critical.

Practical Applications

Bitwise operators can dramatically increase the efficiency of the code where operations on individual bits are required. Some practical applications include:

Settings and Configuration: Use flags to enable or disable features.
Permission Systems: Efficiently manage user permissions.
Data Encoding and Decoding: Manipulate data at the bit level for custom communication protocols.

Conclusion

While JavaScript provides the necessary tools to perform low-level operations via bitwise operators, TypeScript enhances these operations with its robust type system and enums. For developers aiming to write more maintainable, error-resistant code, TypeScript offers significant advantages. The combination of JavaScript's flexibility with TypeScript's enhancements allows developers to leverage the best of both worlds, making it an excellent choice for projects that demand both performance and reliability.

Implementing Custom Dark Mode with Tailwind CSS: A Complete Guide

Bradley Dirheimer — Mon, 22 Apr 2024 03:26:55 +0000

As the digital landscape evolves, the adoption of dark mode on websites has become increasingly important, offering users a more personalized and eye-friendly browsing experience. Tailwind CSS, a utility-first CSS framework, has continually updated its features to allow seamless integration of dark mode into web projects. One significant enhancement is Tailwind CSS's transition from the 'class' strategy to the more flexible 'selector' strategy, which provides greater control over user experience. This blog post explores this transition, illustrating how to manually implement and manage dark mode using the latest capabilities of Tailwind CSS.

Understanding the Selector Strategy

With the release of version 3.4.1, Tailwind CSS introduced the 'selector' strategy, replacing the older 'class' strategy. This new approach allows developers to activate dark mode by adding a specific class to a higher element in the HTML structure, such as the <html> tag, thus providing direct control over the dark mode, independent of the user's system settings.

Configuring Tailwind CSS for Selector Strategy

To use the selector strategy in your Tailwind CSS setup, you must update your tailwind.config.js file as follows:

module.exports = {
  darkMode: 'selector', // Enable selector strategy for dark mode
  // Additional configuration...
}

This configuration ensures that dark mode-specific classes such as dark:bg-black will activate whenever the dark class is present on the parent or a higher-level HTML element.

Example Usage

Implementing the selector strategy in your HTML is straightforward:

<!-- Dark mode not enabled -->
<html>
<body>
  <div class="bg-white dark:bg-black">
    <!-- Content without dark mode -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <div class="bg-white dark:bg-black">
    <!-- Content with dark mode -->
  </div>
</body>
</html>

In this setup, the background of the div will be white by default and switch to black when the dark class is added to the <html> tag.

Dynamically Toggling Dark Mode with JavaScript

To allow users to control the appearance of your application, you can use JavaScript to dynamically toggle dark mode based on their preferences. This can be effectively managed using localStorage to remember user settings:

// Check and apply the user's stored preference or the system preference on page load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

// User actions to explicitly choose themes
function toggleTheme(isDark) {
  localStorage.theme = isDark ? 'dark' : 'light'; // Save preference
  document.documentElement.classList.toggle('dark', isDark);
}

This function checks the user's preference stored in localStorage or defaults to the system preference, adding or removing the dark class on the <html> element accordingly.

Customizing the Selector

For projects requiring a unique class name for toggling dark mode or integrating with other frameworks, Tailwind CSS allows for customization of the dark mode selector:

module.exports = {
  darkMode: ['selector', '[data-mode="dark"]'],
  // ...
}

This configuration ensures that your custom selector is wrapped in the :where() pseudo-class to maintain consistency in specificity.

Conclusion

Tailwind CSS’s selector strategy for dark mode provides a flexible and powerful approach to implementing custom dark mode toggling in web projects. It equips developers with the tools to create dynamic, user-centric web applications that cater to individual preferences, enhancing the overall user experience. Whether you’re developing a new website or updating an existing one, integrating Tailwind CSS’s dark mode features can significantly enhance your project's accessibility and aesthetic appeal.

Mastering Next.js Navigation Hooks: An In-Depth Review

Bradley Dirheimer — Sat, 05 Aug 2023 10:05:45 +0000

Next.js, a versatile framework for React applications, has a suite of Client Component hooks that significantly enhance web app navigation. This article takes an in-depth look at four of these hooks: useSelectedLayoutSegment, usePathname, useParams, and useSelectedLayoutSegments. Understanding these hooks' functionalities and nuances can profoundly enrich the navigational dynamics of your Next.js apps.

useSelectedLayoutSegment

useSelectedLayoutSegment is a Client Component hook that gives you access to the active route segment one level below the Layout from which it is invoked. This function is valuable for creating navigation UI components, like tabs within a parent layout, which change their style based on the active child segment.

Notably, useSelectedLayoutSegment does not accept any parameters and returns a string of the active segment or null if one doesn't exist. It's typically utilized within a Client Component that is then imported into a Layout, providing an efficient way to handle specific navigational changes at the granular segment level.

usePathname

The usePathname hook offers a straightforward way to read the current URL's pathname, allowing for dynamic adjustments based on the URL. It can be effectively used within Client Components to conditionally render components or adjust styles based on the current pathname.

Crucially, the usePathname hook returns null in instances when a fallback route is being rendered or when a pages directory page has been automatically statically optimized by Next.js and the router isn't ready. This capability demonstrates the hook's flexibility and usefulness in various scenarios, including handling route changes and responding to dynamic path changes.

useParams

useParams shines in scenarios where you need to access a route's dynamic parameters filled in by the current URL. This hook is especially useful when working with dynamic routes, as it provides an object containing the current route's dynamic parameters.

Each property in the object corresponds to an active dynamic segment. The property's name is the segment's name, and the property's value is what the segment is filled in with. It can either be a string or an array of strings, depending on the type of dynamic segment. If the route contains no dynamic parameters, useParams returns an empty object, providing a fail-safe mechanism for dealing with diverse routing scenarios.

useSelectedLayoutSegments

Lastly, useSelectedLayoutSegments offers a solution for accessing the active route segments from the Layout where it's called. This functionality is vital for creating complex UI elements, such as breadcrumbs, where the context of active child segments is essential.

This hook does not accept any parameters and returns an array of strings containing the active segments one level down from the layout the hook was called from, or an empty array if none exist. Additionally, the returned segments can include Route Groups which, if not desired, can be filtered out using JavaScript's filter() array method.

Key Takeaways

Each of these hooks brings its own unique advantages to Next.js development. useSelectedLayoutSegment allows for granular segment-level navigational changes, while usePathname provides a convenient way to read the current URL's pathname. useParams simplifies access to dynamic route parameters, and useSelectedLayoutSegments offers a means of generating context-aware UI elements like breadcrumbs.

By understanding these hooks and their differences, you can create more sophisticated, dynamic, and user-friendly navigational structures in your Next.js applications. Mastering these hooks equips you to take full advantage of the power and flexibility of the Next.js framework, enhancing your web development process.

Next.js Navigation Hooks: A Deep Dive into useSelectedLayoutSegments

Bradley Dirheimer — Sat, 05 Aug 2023 10:04:39 +0000

In the Next.js framework, managing navigation within your web applications can be simplified by using Client Component hooks. One such hook, useSelectedLayoutSegments, offers a unique capability in accessing the active route segments from the Layout where it's called, thus proving invaluable for creating complex UI elements such as breadcrumbs. This blog post will take an in-depth look at useSelectedLayoutSegments.

Understanding useSelectedLayoutSegments

useSelectedLayoutSegments is a Client Component hook designed to read active route segments, one level below the Layout it's called from. Here is a simple demonstration:

'use client'

import { useSelectedLayoutSegments } from 'next/navigation'

export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()

  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  )
}

This hook is typically invoked within a Client Component which is then imported into a Layout. This is because useSelectedLayoutSegments is a Client Component hook, while Layouts are Server Components by default.

The hook returns an array of strings representing active segments one level below from where the hook was called, or an empty array if none exist.

In situations where the returned segments include Route Groups (which you might not want to be included in your UI), you can leverage JavaScript's filter() array method to exclude items starting with a bracket.

useSelectedLayoutSegments does not accept any parameters. Here is how the return values look for different Layouts and URLs:

Layout	Visited URL	Returned Segments
app/layout.js	/	[]
app/layout.js	/dashboard	['dashboard']
app/layout.js	/dashboard/settings	['dashboard', 'settings']
app/dashboard/layout.js	/dashboard	[]
app/dashboard/layout.js	/dashboard/settings	['settings']

Practical Use Case: Breadcrumbs

Breadcrumbs are a useful navigational aid in web interfaces. They allow users to understand their current location in relation to the site's hierarchy, providing a simple way to navigate back to previous levels.

In a Next.js application, you can leverage useSelectedLayoutSegments to generate breadcrumbs dynamically. For example, consider a site structure where a user navigates from Home > Blog > Article. You can create a breadcrumbs component using this hook as follows:

'use client'

import { useSelectedLayoutSegments } from 'next/navigation'
import Link from 'next/link'

export default function Breadcrumbs() {
  const segments = useSelectedLayoutSegments()

  return (
    <nav>
      <ul>
        {segments.map((segment, index) => (
          <li key={index}>
            <Link href={`/${segments.slice(0, index + 1).join('/')}`}>
              {segment}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

In this example, the hook returns an array of active route segments. We then map through these segments to create a Link component for each, generating the href by slicing the segments array up to the current index and joining the slices with a slash.

In Conclusion

useSelectedLayoutSegments is a potent tool that comes bundled with the Next.js framework, granting you a way to enhance the UI and UX of your web applications. It simplifies the process of creating dynamic UI elements like breadcrumbs, providing users with a clearer view of their path within the website. Mastering this hook is a sure way to level up your Next.js development skills.

Harnessing the Power of Next.js Navigation Hooks: usePathname and useParams

Bradley Dirheimer — Sat, 05 Aug 2023 10:04:17 +0000

Navigation in web development is key. Knowing where the user is and the parameters that define the current route can greatly enhance the user experience and functionality of an application. In this blog post, we delve into two client component hooks that Next.js offers for managing navigation and routing: usePathname and useParams.

An Insight into usePathname

usePathname is a hook that allows you to read the current URL's pathname. To implement it in a Next.js application, you call usePathname() in a client component and it will return the current pathname.

Here's a simple usage of the hook:

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

This hook is intentionally designed to be used within a Client Component. These components are an integral part of the Server Components architecture and are not considered a de-optimization.

For instance, a Client Component with usePathname will render into HTML on the initial page load. Subsequent navigation does not necessitate a re-fetch of this component; instead, it is downloaded once (in the client JavaScript bundle), and re-renders based on the current state.

Note that reading the current URL from a Server Component is not supported. This design preserves layout state across page navigations.

In compatibility mode, usePathname may return null when a fallback route is being rendered, or when a pages directory page has been automatically statically optimized by Next.js and the router is not ready.

The usePathname hook does not accept any parameters. It returns a string representing the current URL's pathname.

Here are a few examples of its usage:

URL	Returned value
/	'/'
/dashboard	'/dashboard'
/dashboard?v=2	'/dashboard'
/blog/hello-world	'/blog/hello-world'

This hook is handy when you need to execute something in response to a route change:

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}

Leveraging useParams

useParams is another Client Component hook provided by Next.js that lets you read a route's dynamic params filled in by the current URL.

Consider the following example:

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return <></>
}

The useParams hook does not accept any parameters. It returns an object containing the current route's filled in dynamic parameters. If the route contains no dynamic parameters, useParams returns an empty object. In pages, useParams will return null.

Here's an example illustrating how it behaves for various routes:

| Route | URL | useParams() |
|-------|-----|---——--------|
| app/shop/page.js | /shop | null |
| app/shop/[slug]/page.js | /shop/1 | { slug: '1' } |
| app/shop/[tag]/[item]/page.js | /shop/1/2 | { tag: '1', item: '2' } |
| app/shop/[...slug]/page.js | /shop/1/2 | { slug: ['1', '2'] } |

In Conclusion

usePathname and useParams are powerful tools provided by Next.js to handle navigation and routing within an application. They provide a developer with the ability to read and react to the current URL's pathname and dynamic parameters, enabling the development of dynamic and interactive web applications. Harnessing these hooks will take your Next.js development to the next level.

Making the Most of useSelectedLayoutSegment

Bradley Dirheimer — Sat, 05 Aug 2023 10:03:55 +0000

The web is all about navigation, and as developers, we often need to keep track of where a user is in our app. Navigational elements often change based on where the user is currently at. In Next.js, a popular React framework, this can be accomplished by using the useSelectedLayoutSegment hook. This client component hook lets you read the active route segment one level below the layout it is called from, making it an invaluable tool for navigation UI.

Understanding useSelectedLayoutSegment

In the following example, the useSelectedLayoutSegment hook is called from a client component and returns the active segment.

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()

  return <p>Active segment: {segment}</p>
}

Given that useSelectedLayoutSegment is a Client Component hook and Layouts are Server Components by default, useSelectedLayoutSegment is typically invoked via a Client Component that is imported into a Layout. The hook returns the segment one level down, making it particularly useful for UI elements such as tabs inside a parent layout, which often need to change their style based on the active child segment.

If you need to return all active segments, consider using useSelectedLayoutSegments instead.

Hook Parameters and Returns

useSelectedLayoutSegment does not take any parameters. It does, however, return a string of the active segment or null if one doesn't exist. Here are a few examples:

Layout	Visited URL	Returned Segment
app/layout.js	/	null
app/layout.js	/dashboard	'dashboard'
app/dashboard/layout.js	/dashboard	null
app/dashboard/layout.js	/dashboard/settings	'settings'
app/dashboard/layout.js	/dashboard/analytics	'analytics'
app/dashboard/layout.js	/dashboard/analytics/monthly	'analytics'

Practical Example: Active Link Component

The real power of useSelectedLayoutSegment comes into play when we use it to create an active link component that changes its style based on the active segment. Here's an example of how to do this, using a featured posts list in the sidebar of a blog:

'use client'

import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

// This *client* component will be imported into a blog layout
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Navigating to `/blog/hello-world` will return 'hello-world'
  // for the selected layout segment
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Change style depending on whether the link is active
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

And the parent Layout component:

// Import the Client Component into a parent Layout (Server Component)
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'

export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

In this example, the BlogNavLink component uses useSelectedLayoutSegment to determine the active segment. Depending on whether the link is active, the link's style will change, providing a clear visual cue for the user.

In conclusion, Next.js's useSelectedLayoutSegment is a handy hook that can help you build dynamic, user-friendly navigation interfaces. By using it wisely, you can greatly enhance the user experience on your site.

Deep Dive into useSearchParams: Mastering Query String Manipulation

Bradley Dirheimer — Sat, 05 Aug 2023 10:02:43 +0000

The rise of Server-side rendering (SSR) has gained popularity for a few reasons. One of the main benefits is improved performance and user experience. With SSR, the server generates the initial HTML content and sends it directly to the client, making the website or application load faster. This can reduce the time to first meaningful paint and improve SEO since search engines can easily crawl and index the content.

This has left popular libraries like React JS, looking for an answer. This is lead to the partnership of react, and next JS to develop a solution working together. This has lead to so awesome new hooks, among which one that often goes unnoticed is 'useSearchParams'. This client component hook lets you read the current URL's query string, making it easier than ever to manage URL parameters within your Next.js applications.

Let's start by examining the basics of the useSearchParams hook and how to implement it in your Next.js application.

A Basic Example: The Search Bar

Consider the following TypeScript example of a search bar component, which uses useSearchParams to read the query string from the URL:

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const search = searchParams.get('search')

  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

In the example above, useSearchParams returns a read-only version of the URLSearchParams interface. This interface provides several utility methods for reading and manipulating the URL's query string.

Understanding the URLSearchParams Interface

When you call useSearchParams, it returns a read-only version of the URLSearchParams interface. This interface includes several utility methods such as get(), has(), getAll(), keys(), values(), entries(), forEach(), and toString().

Notably, the get() method returns the first value associated with the specified search parameter, while the has() method returns a boolean value indicating if a given parameter exists.

Do note that useSearchParams is a Client Component hook and is not supported in Server Components. This is to prevent stale values during partial rendering, maintaining the freshness and accuracy of your data.

Static Rendering and Dynamic Rendering

Static rendering and dynamic rendering are two significant aspects of how useSearchParams behaves.

In statically rendered routes, calling useSearchParams will cause the tree up to the closest Suspense boundary to be client-side rendered. To reduce the portion of the route that is client-side rendered, you can wrap the component using useSearchParams in a Suspense boundary.

For dynamically rendered routes, useSearchParams will be available on the server during the initial server render of the Client Component. You can force dynamic rendering by setting the dynamic route segment config option to force-dynamic.

Server Components

In Pages (Server Components), you can access search params through the searchParams prop. However, Layouts (Server Components) do not receive this prop to prevent stale searchParams between navigations. In such cases, use the Page searchParams prop or the useSearchParams hook in a Client Component, which is re-rendered on the client with the latest searchParams.

Updating searchParams

To set new searchParams, you can use useRouter or Link. After a navigation is performed, the current page.js will receive an updated searchParams prop. Here is an example:

export default function ExampleClientComponent() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()!

  // Get a new searchParams string by merging the current
  // searchParams with a provided key/value pair
  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams)
      params.set(name, value)

      return params.toString()
    },
    [searchParams]
  )

  return (
    <>
      <p>Sort By</p>

      {/* using useRouter */}
      <button
        onClick={() => {
          // <pathname>?sort=asc
          router.push(pathname + '?' + createQueryString('sort', 'asc'))
        }}
      >
        ASC
      </button>

      {/* using <Link> */}
      <Link
        href={
          // <pathname>?sort=desc
          pathname + '?' + createQueryString('sort', 'desc')
        }
      >
        DESC
      </Link>
    </>
  )
}

In conclusion, useSearchParams is a powerful tool in the Next.js arsenal, allowing you to elegantly handle URL query strings within your application. Understanding and mastering this hook will undoubtedly bring your Next.js development skills to the next level.

Understanding and Implementing One-Time Password (OTP) Input Component in React

Bradley Dirheimer — Tue, 18 Jul 2023 02:17:24 +0000

Introduction

Do you find yourself curious about how the one-time password (OTP) input component operates on an application or webpage? This OTP feature, composed of several input elements, each accepting only one character, behaves as a cohesive unit, akin to a normal input component. In this blog post, we will explain how to create this OTP component, understand its workings, and delve into the various use cases involved with it. Let's dive into it right away!

Understanding the OTP Component

The OTP or passcode component is essentially a collection of individual input boxes where each box corresponds to a single character of the passcode. This has become a prevalent practice in modern web and mobile applications as part of the validation process. However, implementing this feature is not as straightforward as it seems. It requires handling a variety of scenarios, including key event handling, providing a user-friendly pasting experience, and managing focus shifts in a sensible manner.

Key Scenarios in a Passcode Component

When designing the passcode component, it's crucial to consider the following scenarios:

View a live view on vercel

Fundamental scenarios:

Each input box should accept only a single character.
Upon character entry, the focus should automatically shift to the next input element.
When backspacing, the focus should shift from the current to the previous input element.
Advanced scenarios:

Pasting Experience: This includes handling user permissions, determining where the focus should land after pasting, and managing how the input fields are populated when a value is pasted.
Diving into the Code Implementation
Now that we've explored the key scenarios, let's delve into how to implement them. Below is a code snippet demonstrating a more advanced version of the OTP component:

Advanced scenarios:

Pasting Experience: This includes handling user permissions, determining where the focus should land after pasting, and managing how the input fields are populated when a value is pasted.

Diving into the Code Implementation

Now that we've explored the key scenarios, let's delve into how to implement them. Below is a code snippet demonstrating a more advanced version of the OTP component:

Github Repo

State Variables:

const [arrayValue, setArrayValue] = useState<(string | number)[]>(['', '', '', '']);
const [maskedValue, setMaskedValue] = useState<(string | number)[]>(['', '', '', '']);
const [showTooltip, setShowTooltip] = useState(false);
const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

The component maintains four separate pieces of state:

arrayValue is the actual value of the four-digit code being entered.
maskedValue is a display-only value which replaces the numbers in arrayValue with asterisks.
showTooltip is a boolean value that toggles the display of a tooltip.
inputRefs holds references to the four input elements.
Page load focus:

React.useEffect(() => {
    inputRefs.current[0]?.focus();
}, []);

This useEffect hook is triggered on initial render, and it sets the focus to the first input field.

Paste function:

Copy code
const onPaste = (e: React.ClipboardEvent, index: number) => { ... };

This function handles pasting from the clipboard. It prevents the default paste action, and instead splits the pasted text into an array. If every character in the array is a number, it updates arrayValue and maskedValue with the pasted values.

Key down function:


const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => { ... };

This function handles key down events. It prevents the default action for every key that isn't Backspace, Delete, Tab, or a number between 0 and 9. If one of the forbidden keys is pressed, it displays a tooltip for two seconds.

Change function:

const onChange = (e: BaseSyntheticEvent, index: number) => { ... };

This function is called whenever the user types into an input. If the input is a number, it updates arrayValue and maskedValue. If the input is not empty, it moves the focus to the next input.

Key up function:

const onKeyUp = (e: KeyboardEvent<HTMLInputElement>, index: number) => { ... };

This function is called when a key is released. If Backspace or Delete is released, it clears the current input and moves the focus to the previous input.

Reset function:

const resetInputs = () => { ... };

This function resets all inputs and refocuses on the first input.

Submit function:

const handleSubmit = () => { ... };

This function handles the form submission. Right now, it simply logs the entered value. You would typically add your database logic here.

codesandbox.io