What is pipeline operator in JavaScript?

NisalK — Sat, 21 Jan 2023 11:41:54 +0000

The pipe operator (|>) is a proposed addition to the JavaScript language that would allow for a more concise and readable way of chaining function calls. It is inspired by similar operators in functional programming languages such as Elixir and F#.

The idea behind the pipe operator is to take the output of one function and immediately pass it as the input to the next function in the chain. For example, consider the following code that uses the map, filter, and reduce functions to transform an array of numbers:

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .map(n => n * 2)
  .filter(n => n > 4)
  .reduce((acc, n) => acc + n, 0);
console.log(result); // 14

With the pipe operator, the same code could be written like this:

const numbers = [1, 2, 3, 4, 5];
const result = numbers 
|> n => n * 2 
|> n => n > 4 
|> (acc, n) => acc + n;
console.log(result); // 14

In this example, the pipe operator takes the numbers array and passes it as the first argument to the first function (n => n * 2), which returns a new array with each element multiplied by 2. This new array is then passed as the first argument to the second function (n => n > 4), which returns a new array containing only the elements that are greater than 4. Finally, this new array is passed as the first argument to the reduce function, which computes the sum of all elements.

The pipe operator can also be used to chain method calls on an object, by providing the object as the first argument to the function. For example:

const obj = {a: 1, b: 2, c: 3};
const result = obj 
|> ({a,b}) => ({a,b}) 
|> ({a,b}) => a + b;
console.log(result); // 3

The pipe operator is not a part of the official JavaScript language yet, but it is a popular proposal and has been implemented in several transpilers and libraries, such as the pipeline operator proposal in the babel.js transpiler.

One of the main advantages of the pipe operator is that it can make code more readable by making it clear the flow of data through a chain of functions. Instead of having to read the code from left to right and keep track of intermediate variables, the flow of data can be followed directly from the first function to the last. This can make it easier to understand the purpose of the code and to find and fix bugs.

Additionally, it's also a good practice to use the pipe operator when dealing with functional programming, it makes the code look more elegant and readable as well.

However, not every developer might find the pipe operator useful, it's a matter of personal preference, and it's important to evaluate the readability and maintainability of the codebase, before making a decision to use the pipe operator or not.

More information 👇

I hope you found this article helpful. Connect with me on Dev.to and LinkedIn.com Thank you !

Top 10 most useful react hooks.

NisalK — Tue, 17 Jan 2023 18:48:05 +0000

What is this article about?
React Hooks are a new feature in React that allows you to use state and other React features in functional components instead of just class-based components. Before the introduction of hooks, functional components were only able to receive props and render the components.

Hooks provide a way to use state and other React features in functional components by allowing you to "hook into" React's features. React provides a few built-in hooks like useState, useEffect, useContext and useReducer that can be used to add state and other functionality to functional components.

In this article we are going to discuss about 10 custom hooks from Mantine.dev components library. Matine Hooks is a library for React that provides additional hooks for common functionality such as managing state, handling lifecycle events, and interacting with external APIs. It is an open-source project that aims to make it easier for developers to build complex and dynamic user interfaces using React.

01 useIdle

Detect if user is idle or active on page

import { useIdle } from '@mantine/hooks';
import { Badge } from '@mantine/core'; // optiona
function Demo() {
  const idle = useIdle(2000);
  return <Badge color={idle ? 'blue' : 'teal'}>Current state: {idle ? 'idle' : 'not idle'}</Badge>;
}

02 useClickOutside

Detect click and touch events outside of specified element , useful to close opened modals components

import { useState } from 'react';
import { Paper, Button } from '@mantine/core';
import { useClickOutside } from '@mantine/hooks';

function Demo() {
  const [opened, setOpened] = useState(false);
  const ref = useClickOutside(() => setOpened(false));

  return (
    <>
      <Button onClick={() => setOpened(true)}>Open dropdown</Button>

      {opened && (
        <Paper ref={ref} shadow="sm">
          <span>Click outside to close</span>
        </Paper>
      )}
    </>
  );
}

03 useOs

Detect user's operating system

import { useOs } from '@mantine/hooks';

function Demo() {
  const os = useOs();
  return <>Your os is <b>{os}</b></>;
}

04 useNetwork

Get current connection status

import { Text, Table } from '@mantine/core';
import { useNetwork } from '@mantine/hooks';

function Demo() {
  const networkStatus = useNetwork();

  return (
    <Table sx={{ maxWidth: 300, tableLayout: 'fixed' }} mx="auto">
      <thead>
        <tr>
          <th>Property</th>
          <th>Value</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Online</td>
          <td>
            <Text size="sm" color={networkStatus.online ? 'teal' : 'red'}>
              {networkStatus.online ? 'Online' : 'Offline'}
            </Text>
          </td>
        </tr>

        <tr>
          <td>rtt</td>
          <td>{networkStatus.rtt}</td>
        </tr>

        <tr>
          <td>downlink</td>
          <td>{networkStatus.downlink}</td>
        </tr>

        <tr>
          <td>effectiveType</td>
          <td>{networkStatus.effectiveType}</td>
        </tr>

        <tr>
          <td>saveData</td>
          <td>
            <Text size="sm" color={networkStatus.saveData ? 'teal' : 'red'}>
              {networkStatus.saveData ? 'true' : 'false'}
            </Text>
          </td>
        </tr>
      </tbody>
    </Table>
  );
}

05 useEyeDropper

Pick color from any pixel on the screen

import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/icons';
import { useEyeDropper } from '@mantine/hooks';

function Demo() {
  const [color, setColor] = useState('');
  const [error, setError] = useState(null);
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = await open();
      setColor(sRGBHex);
    } catch (e) {
      setError(e);
    }
  };

  if (!supported) {
    return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
  }

  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor}>
        <IconColorPicker size={16} stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group spacing="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text color="red">Error: {error?.message}</Text>}
    </Group>
  );
}

06 useWindowScroll

Subscribe to window scroll and scroll smoothly to given position

import { useWindowScroll } from '@mantine/hooks';
import { Button, Text, Group } from '@mantine/core';

function Demo() {
  const [scroll, scrollTo] = useWindowScroll();

  return (
    <Group position="center">
      <Text>
        Scroll position x: {scroll.x}, y: {scroll.y}
      </Text>
      <Button onClick={() => scrollTo({ y: 0 })}>Scroll to top</Button>
    </Group>
  );
}

07 useToggle

Switch between given values

import { Button } from '@mantine/core';
import { useToggle } from '@mantine/hooks';

function Demo() {
  const [value, toggle] = useToggle(['blue', 'orange', 'cyan', 'teal']);

  return (
    <Button color={value} onClick={() => toggle()}>
      {value}
    </Button>
  );
}

08 useLocalStorage

Use localStorage value as react state, sync state across opened tabs

import { useLocalStorage } from '@mantine/hooks';
import { ActionIcon, ColorScheme } from '@mantine/core';
import { IconSun, IconMoonStars } from '@tabler/icons';

function ColorSchemeToggle() {
  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
    key: 'color-scheme',
    defaultValue: 'light',
  });

  const toggleColorScheme = () =>
    setColorScheme((current) => (current === 'dark' ? 'light' : 'dark'));

  return (
    <ActionIcon onClick={toggleColorScheme}>
      {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
    </ActionIcon>
  );
}

09 useMediaQuery

Subscribe to media queries with window.matchMedia

import { Badge } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';

function Demo() {
  const matches = useMediaQuery('(min-width: 900px)');

  return (
    <Badge color={matches ? 'teal' : 'red'} variant="filled">
      Breakpoint {matches ? 'matches' : 'does not match'}
    </Badge>
  );
}

10 useFullscreen

Enter/exit fullscreen with given element

import { useFullscreen } from '@mantine/hooks';
import { Button } from '@mantine/core';

function Demo() {
  const { toggle, fullscreen } = useFullscreen();

  return (
    <Button onClick={toggle} color={fullscreen ? 'red' : 'blue'}>
      {fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
    </Button>
  );
}

Need more?
There are more than 40+ hooks are available.
Checkout here 👉 https://mantine.dev/hooks/use-counter/
I hope this article has been useful to you , Follow me 😊

DEV Community: NisalK