Forem: Alex Suarez

React Collapsible Component with Auto Height Detection.

Alex Suarez — Wed, 21 Jun 2023 19:28:57 +0000

Collapsible components with variable heights are hard, but not anymore, this example will make you rethink how you develop this in your company library from now on! Let's get into it!

Step 1: Create the Collapsible Component

For this example, I'm using styled-components but feel free to use plane css, or any css-in-js library you prefer



// Collapsible component 

interface Animation {
  duration?: number;
  ease?: string;
}

interface CollapsibleProps {
  children: React.ReactNode;
  open: boolean;
  animation?: Animation;
}

const defaultAnimationValues = {
  duration: 0.2,
  ease: "ease-in-out"
};

const CollapsibleWrapper = styled.div<{ open: boolean; animation: Animation }>`
  display: grid;
  grid-template-rows: ${(props) => (props.open ? "1fr" : "0fr")};
  opacity: 0;
  transition: all ${(props) => props.animation.duration}s
    ${(props) => props.animation.ease};
  opacity: ${(props) => (props.open ? 1 : 0)};
`;

const CollapsibleInner = styled.div`
  overflow: hidden;
`;

export const Collapsible: React.FC<CollapsibleProps> = ({
  children,
  open,
  animation = defaultAnimationValues
}) => {
  return (
    <CollapsibleWrapper open={open} animation={animation}>
      <CollapsibleInner>{children}</CollapsibleInner>
    </CollapsibleWrapper>
  );
};

I added extra props to control animation timing and speed to make more customisable, beyond that there's not to much here here except for one detail...



grid-template-rows: ${(props) => (props.open ? "1fr" : "0fr")};

This is the secret sauce! This line will actually open and close the Collapsible component adjusting the wrapper component height based on the children height!

Step2: Using the component

This is also incredible straightforward, set the state for toggling "show" and render whatever you want inside your new Collapsible component!



// App component 

export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="App">
      <button onClick={() => setShow(!show)}>click</button>
      <Collapsible open={show}>
        <div className="bg-gray-100 py-4">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      </Collapsible>
    </div>
  );
}

Now you can stop using those crazy height-controlled components! Wrap the code from the next codesanbox

Say Yes to Modals with the Dialog Tag!

Alex Suarez — Wed, 03 May 2023 12:30:13 +0000

Modal components are widely used in web development, but they often rely on a multitude of nested div elements, which can make the code less readable and harder to maintain. In this article, we'll explore an alternative approach using the HTML dialog tag that can help keep our code clean and efficient.

Why Use the Dialog Tag?

Here are a few reasons why using the dialog tag can be beneficial for implementing modals:

It comes with its own built-in backdrop and positioning, saving you time and effort.
It's easy to style both the backdrop and the dialog itself.
It has native methods for opening and closing the dialog, making it easy to implement with React.

How to Use the Dialog Tag

Let's jump straight into the code and see how we can create a Modal component using the dialog tag:

The Modal

// Modal.jsx

const Modal = forwardRef(({ children, onClose }, ref) => {
  return (
    <dialog ref={ref}>
      <button onClick={onClose}>&times;</button>
      {children}
    </dialog>
  );
});

Here, we've created a Modal component that takes in two props: children, which represent the content of the modal, and onClose, which is a function that will be called when the user clicks on the close button. The forwardRef function is used to forward the ref to the dialog element.

Next, let's take a look at the useModal hook, which will be used to manage the state of the modal:

// useModal.js

function useModal() {
  const ref = React.useRef(null);
  const onOpen = () => ref.current.showModal();

  const onClose = () => {
    ref.current.className = "close";
    setTimeout(() => {
      ref.current.close();
      ref.current.className = "";
    }, 400); // this value will matching your css animation timing
  };

  return { ref, onOpen, onClose };
}

Here, we've created a useModal hook that returns an object with three properties: ref, onOpen, and onClose. The ref is used to reference the dialog element created by the Modal component, and the onOpen and onClose functions are used to show and hide the modal respectively.

Finally, let's put everything together in our App component:

// using the modal and the hook

export default function App() {
  const { ref, onOpen, onClose } = useModal();

  return (
    <div className="App">
      <button onClick={onOpen}>open modal</button>

      <Modal ref={ref} onClose={onClose}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </Modal>
    </div>
  );
}

Here, we've created an App component that renders a button that, when clicked, calls the onOpen function to open the modal. The Modal component is then rendered with the ref and onClose props.

You can easily customize the appearance of the modal to fit your needs. After adding some basic styles and animations I get something like this:

Conclusion

Using the dialog tag can be a great way to simplify the implementation of modals in your React projects. By taking advantage of the built-in features of the dialog element, we can write cleaner and more efficient code, making our projects easier to maintain and debug. Give it a try in your next project and see the benefits for yourself!

Smoothly test React components with multiple Contexts.

Alex Suarez — Thu, 26 May 2022 20:35:27 +0000

Credits: Photo by Tima Miroshnichenko

Yes yes I know, testing, I'll be honest, I hate (start) writing tests, but, once I start, I love it, the problem is that then, I want to keep writing tests, and not coding LOL, just joking but is kinda like that, you may suffer from the same mix of feelings (I hope not)

This is a very very interesting toping, since many developers, even seniors, sometimes don't know where to start (starting is the issue as you can see), or how we can use utils or helpers to reduce the boilerplate in our components, especially when I want to test components wrapped in several Context Providers. Do I need to repeat my self on every test file? Hopefully, this will make your life easier from now on, let's get into it!... We will be using react testing library, of course.

The problem

We have an application that has some Context, and our components consume those Context values, now we need to test these components, and we want to definitely pass customs values to our components Providers to try to assert the results in our unit tests

The initial solution

Initially, you may think let's export our Provider and pass the custom values etc and expect some results, well yes and no, this is a problem for the next reasons

Repeat your self all the time in all files but adding the Context Provider with the values
If you need to render the component that you need you want to test with more than one Context this may become hard to read and very boilerplate

Let's take a simple Context example


const initialState = {
  name: "alex",
  age: 39
};

const MyContext = React.createContext(initialState);

export const useMyContext = () => React.useContext(MyContext);

const reducer = (currentState, newState) => ({ ...currentState, ...newState });

export const MyContextProvider = ({ children }) => {
  const [state, setState] = React.useReducer(reducer, initialState);
  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

BTW you can make this cooler but destructuring the Provider from the Context all in one line bla bla, notice the cool useReducer :), but is the same basically, so, you will use this Context like:

export default function App() {
  return (
    <MyContextProvider>
      <Component />
    </MyContextProvider>
  );
}

And in component you can use you Context by using the custom hook you already declared in the Context file, something like:

function Component() {
  const { state, setState } = useMyContext();
  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => setState({ name: e.target.value })}
      />
      Name: {state.name}, Last Name: {state.lastName}
    </div>
  );
}

Now you want to test this component right?, What do you do? Export the Context to declare again the wrapper in my test and passing custom values, let go to our Context file and export our context

export const MyContext = React.createContext(initialState);

Now in your test you will do something like

import { render } from '@testing-library/react';

const renderComponent() {
  return (
    render(
      <MyContext.Provider value={{ mockState, mockFnc}}>
        <Component>
      </MyContext.Provider>
    )
  )
}
// ... test

This is fine if your component uses only one Context, but if you use several? And even if is one, you need to do these in all your tests

Solution: the custom render

Let's build a custom render method that returns our component wrapped in as many Contexts we want with as many Provider values we want!

// /testUtils/index.js
// custom render
import { render as rtlRender } from '@testing-library/react';

// our custom render
export const render = (ui, renderOptions) => {
    try {
        return rtlRender(setupComponent(ui, renderOptions));
    } catch (error: unknown) {
        throw new Error('Render rest util error');
    }
};

This utility method will expect to params, the component, called ui, and the options, and it will use setupComponent method to render the view as a normal react component, let's finished!

// /testUtils/index.js
// import all the Context you will use in the app
import {MyContext} from './MyContext'
import {MyContext1} from './MyContext'
import {MyContext2} from './MyContext'

const CONTEXT_MAP = {
  MyContext,
  MyContext1,
  MyContext2
}

const setupComponent = (ui, renderOptions) => {
  const { withContext } = renderOptions;

  if (withContext == null) return ui;

  return (
      <>
          {withContext.reduceRight((acc, { context, contextValue }) => {
              const Ctx = CONTEXT_MAP[context];
              return <Ctx.Provider value={contextValue}>{acc}</Ctx.Provider>;
          }, ui)}
      </>
  );
};

By reducing right you ensure the first Context you pass, will the at the first to be rendered, nice eh? Final file looks like:

// /testUtils/index.js
// import all the context you will use in the app
import { render as rtlRender } from '@testing-library/react';
import {MyContext} from './MyContext'
import {MyContext1} from './MyContext'
import {MyContext2} from './MyContext'

const CONTEXT_MAP = {
  MyContext,
  MyContext1,
  MyContext2
}

const setupComponent = (ui, renderOptions) => {
  const { withContext } = renderOptions;

  if (withContext == null) return ui;

  return (
      <>
          {withContext.reduceRight((acc, { context, contextValue }) => {
              const Ctx = CONTEXT_MAP[context];
              return <Ctx.Provider value={contextValue}>{acc}</Ctx.Provider>;
          }, ui)}
      </>
  );
};

// our custom render
export const render = (ui, renderOptions) => {
    try {
        return rtlRender(setupComponent(ui, renderOptions));
    } catch (error: unknown) {
        throw new Error('Render rest util error');
    }
};

Now the same test will look like this:

import { render } from './testUtils';

const renderComponent() {
  return (
    render(
        <Component/>,
        [{context: "MyContext", contextValue: {name: 'Max', lastName: "Smith"}}]
    )
  )
}

// test ...

The cool thing is that in the array of Contexts you can pass as many of them as you want, following the format of {context, contextValue}, of course, the recommendation is to use typescript, but it will make the article longer, but now you got the idea if you have any issues turning this into TS let me know I can help. That's it guys, let me know if you use any other trick or if you do it using a different approach. Happy coding!

React dot notation component with TS

Alex Suarez — Sun, 08 May 2022 19:48:58 +0000

Yes I know, dot notation components are not very much used (libraries aside) in your projects, I've found out that is hard to check some legacy or green-field code containing some dot notation approach in it. Nevertheless is not an out-of-date pattern and overall is very useful. Let's jump in

When to do-notate components

There is not a most here, but from my personal point of view the right use of it is for components that "compose" themself all the time using necessary parts (other components)

The classic example would be a Table, think about it, your table will have thead, tbody, th, tr, and td, but you want to separate those parts into its own components, to add styles, or maybe to handle some logic and made it easy to test, but your table will always use it.

Import less and do more

For such components avoiding using dot notation causes imports to be long lines even if you use naming and try to do it from a single file
it would be cool if you simple import Table instead of Table plus all the small parts

import {Table, Thead, Tbody, Col, Row} from './table'

import {Table} from './table'

Typescript autocomplete

By using typescript (do it if you don't), also it's easy to autocomplete your Table component, since by typing now by typing "Table." will suggest you all the possible notations added to Table

Let's do it quickly

import React from "react";
import "./styles.css";

type TableCmp = React.FunctionComponent & {
  Thead: React.FC;
  Tbody: React.FC;
  Row: React.FC;
  Col: React.FC;
};

const Table: TableCmp = ({ children }): JSX.Element => <>{children}</>;
const Thead: React.FC = ({ children }): JSX.Element => (
  <thead>{children}</thead>
);
const Tbody: React.FC = ({ children }): JSX.Element => (
  <tbody>{children}</tbody>
);
const Row: React.FC = ({ children }): JSX.Element => <tr>{children}</tr>;
const Col: React.FC = ({ children }): JSX.Element => <td>{children}</td>;

Table.Thead = Thead;
Table.Tbody = Tbody;
Table.Row = Row;
Table.Col = Col;

You can extrapolate this to any composition you need and extend the types for any components easily. Happy coding!

React component library with Tailwind in 3 mins!

Alex Suarez — Thu, 07 Oct 2021 00:24:06 +0000

This article assumes you have knowledge about building React Components, Libraries, and Tailwind.

The Starter Point

If you ever want to do a React component library with typescript and have a nice setup for your blanket project I will recommend Create React Library for sure! Alongside visually test your components using Storybook, this CLI allows you, out of the box, to test your component in a real React project. Take a look at it for your next React Library Project.

The Styling

Well this part is up to you, I usually pick styled system w/ styled components but to be honest then you have to write a lot a CSS (not too much tho), and if you need to move faster get around with extra files to manage could be an issue.

Even when that approach is ok why not use utility classes? This is where Tailwind came to the rescue!

I will assume you know what tailwind CSS is and how Adam Wathan and the Tailwind team have made our lives easier, I particularly love it and use it all the time, if you do it, your delivery and development time will be shortened more than usual (fact!)

After looking out there for more than 20 mins (a fairly long time for looking at something code-related!) I realized I will need to do it myself and share the starter with everyone out there

Adding Tailwind to Create React Library

Nothing fancy here just install tailwind CSS (follow the documentation)

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

if you get this error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Just do:

npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Creating the config files

Create the PostCSS and Tailwind configs

in the root of our project add

postcss.config.js with this content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

now to create out tailwind config just run:

npx tailwindcss init

Create tailwind css file by creating a css files named the way you want it at the inside the root folder with this content:

// ./src/tailwind.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Now in your root project, you will find the index.tsx file where you need to export all your components to be used from your library, just include our tailwind CSS in there.

import './tailwind.css'

// rest of my components exports here like

export { default as Button } from './Button'

and as the final step let's change a bit the tailwind config, in the purge part

purge: {
  enabled: process.env.NODE_ENV === 'publish',
  content: ['./src/**/*.{js,jsx,ts,tsx}']
},

I will come to the enabled: process.env.NODE_ENV === 'publish', part later

If you read the documentation of Create React Library, you know that you run yarn start to kickstart your Library project, this will run in watch mode and rebuild your library after any component updates

the dist/ folder will be created with an index.css file with all tailwind classes! Now you can develop your components import them in the App.tsx inside example to test it (once again read Create React Documentation)

Publishing and Purging

Now let's come to the part where you wanna publish your library to NPM ... Well that super big CSS in dist/ is not suitable for publishing and this is the real deal part

go to the package.json and do a super simple trick! Change the NODE_ENV value for each script case

When we run yarn start we don't want to purge our CSS since we need all the available tailwind classes for development, but when we run yarn build we need to purge the CSS to only leave the classes our components are using and lower the file size

in the package.json change this:

"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs ",

for this:

"build": "NODE_ENV=publish microbundle-crl --no-compress --format modern,cjs",
"start": "NODE_ENV=development microbundle-crl watch --no-compress --format modern,cjs ",

When you publish your library, it can be used in any react project importing your components and the theme.

import { Component } from 'your-component-library'
import 'your-component-library/dist/index.css'

Remember the theme could be imported one time in your app in the app.js or index.js files, you don't to do it on every component.

And that's it! You have now you are ready to build amazing react components for everyone out there! Just make it open-source please! :)

Links

Create React Library
Tailwind CSS
Project

Thanks!

Disclaimer! If you are using a Window computer (I don't know why). Setting the NODE_ENV value via script may fail, just run

npm install -g win-node-env

and try again, this should solve the issue :)

Note: This article is not up to date for tailwind v4

Compare Props in React Functional Components.

Alex Suarez — Wed, 28 Apr 2021 17:33:20 +0000

NextProps in React Functional Components

Back in the day, when I was young (LOL), we use react 15, it was more verbose, convoluted, and lacking today's marvelous upgrades, but even when we have some live cycles you really know when to use each of them, besides the most important one "componentDidMount", there was another really important cycle to track props values "componentWillReceiveProps".

Back then you were able to compare the new props values against the current props values like

componentWillReceiveProps(nextProps) {
 if(nextProps.count !== this.props.count) {
  // Do something here since count prop has a new value
 }
}

So let's say you need to do something like this in React 17 today, to skip an apollo query or to avoid any kinda side effects inside your components?

The first thing that may cross your mind is to set some states inside your component to track the props values using a useEffect hook:

function ComponentGettingProps({count, ...restProps}) {
 const [localCount, setLocalCount] = React.useState(0)
 React.useEffect(() => {
  if(count === localCount) {
   // count prop has the same value
   setLocalCount(count)
   // ... do what ever you need to do if the count prop value is the same
  } else {
   // count has a new value, update the local state
   setLocalCount(count)
  }
 }, [count])
 return (...)
}

Although this works, it may get pretty dirty in with the time since you may be checking several props and the logic block may get hard to read.

So, is there any other solution for the case? The answer is yes! Looky for us we can create a custom hook using one of the greatest react native hooks out there: "useRef()"

Let's build our custom hook "usePrevPropValue"

function usePrevPropValue(value) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

Magically these hooks will return the previous count value in every re-render, the reason why this happens is that the stored value of current in ref get saved but not re-computed in every render, therefore the value you are returning is the previously stored one instead of the current prop value :), pretty super amazing, this is a vivid example that the lack of reactivity is also great.

Now let's use our hook

function ComponentGettingProps({count, ...restProps}) {
 const prevCount = usePrevPropValue(count)

 return (
    <div>
      New: {count} Prev: {prevCount}
    </div>
  );
}

Please notice that in practice we just get rid of defining a new state here, but in real life, we also get rid of re-render this component when updating the state we are not using any more :)

This is the live example in case you need the whole picture
https://codesandbox.io/s/naughty-snow-uoo48?file=/src/App.js

I hope this article helps you in your next project and thanks for reading. See ya in the next one!

Animated Sidebar and Modal with Framer Motion

Alex Suarez — Wed, 24 Mar 2021 01:07:35 +0000

So, do you ever wanted to do something like this, but in a few lines of code, without CSS, with transitions that feel natural and smooth??? (sorry this is gif :>) )

Well, you totally can ... With Framer Motion!

Enjoy

https://codesandbox.io/s/framer-motion-tutorial-rf6j2

PS: This is by far my shorter article in DEV, hope it can be useful for your next project.

React Drawer like a Champ!

Alex Suarez — Sat, 07 Nov 2020 00:26:24 +0000

Hi there!!! Hope everything goes fine with you on the other side of the screen wherever you are!

I just found out today about this amazing app for VSCode (Thanks to Cody, the master of Tests!), CodeSpan, and man! I can't hold myself so I decided to write an article with some cool screenshots taken with this app, and what a better example to show than a drawer that I'm building from scratch for the latest component library I'm building!

Here we go...

Oh, wait I'm using TS and styled-system to build this out so "Box" component may look a little weird, if I don't, let you know about this. Now ... here we go ...

React Component!

So nothing fancy here, just a Box component with some props, typed by this interface right here

What is missing? The direction and that is where the magic is ...

So with the helper from above you and based on the isOpen prop you can translate your drawer from the selected direction using the direction props spreading the helper in the component style like this ...

So that's it ... Or since I've always hated those dev who share only images... here is your code!

Component

import React from 'react'
import { Box } from '../../structural'
import { directions } from './directions'

export default function Drawer({
  children,
  isOpen = false,
  speed = 0.5,
  width = '100vw',
  height = '100vh',
  bgColor = 'white',
  direction = 'right',
  zIndex = 99,
  className,
  style
}: DrawerProps) {
  return (
    <Box
      className={className}
      position='fixed'
      height={height}
      width={width}
      backgroundColor={bgColor}
      zIndex={zIndex}
      boxShadow='0 0 15px 3px rgba(0, 0, 0, 0.1)'
      style={{
        transition: `all ${speed}s ease`,
        ...directions(isOpen)[direction],
        ...style
      }}
      data-testid='drawer'
    >
      {children}
    </Box>
  )
}

export interface DrawerProps {
  children?: React.ReactNode
  isOpen?: boolean
  speed?: number
  width?: number | string
  height?: number | string
  bgColor?: string
  zIndex?: number
  direction?: 'top' | 'left' | 'right' | 'bottom'
}

Direction helper

export const directions = (isOpen: boolean) => ({
  right: {
    transform: isOpen ? 'translateX(-100%)' : 'translateX(100%)',
    top: 0,
    left: '100%'
  },
  left: {
    transform: isOpen ? 'translateX(100%)' : 'translateX(-100%)',
    top: 0,
    right: '100%'
  },
  top: {
    transform: isOpen ? 'translateY(100%)' : 'translateY(-100%)',
    left: 0,
    bottom: '100%'
  },
  bottom: {
    transform: isOpen ? 'translateY(-100%)' : 'translateY(100%)',
    left: 0,
    top: '100%'
  }
})

Now

Now? You know how to build a Drawer that opens from every side of your window! :)

Build your own React Tooltip Component

Alex Suarez — Sat, 31 Oct 2020 23:14:22 +0000

Hello! Happy Samhain/Halloween!!! This a very spooky fast article where I would like to show you how I built a react tooltip on my latest side-project.

This is a simple Tooltip component, and even I know there are great libs out there, I'm always betting on building mine first before moving and add a new dependency to my project, let's go...

I'm using tailwindcss for this one, if you are not using tailwindcss in your React project please stop right now and go to https://tailwindcss.com/ and take a look, I have also a couple of starters on github for CRA and Nextjs you may want to clone for a quick start:
Nextjs -> https://github.com/alexandprivate/next-netlify-tailwind-starter
CRA -> https://github.com/alexandprivate/cra-tailwind-router-starter

Now do let's see the code

Full component

function Tooltip({ children, tooltipText }) {
    const tipRef = React.createRef(null);
    function handleMouseEnter() {
        tipRef.current.style.opacity = 1;
        tipRef.current.style.marginLeft = "20px";
    }
    function handleMouseLeave() {
        tipRef.current.style.opacity = 0;
        tipRef.current.style.marginLeft = "10px";
    }
    return (
        <div
            className="relative flex items-center"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <div
                className="absolute whitespace-no-wrap bg-gradient-to-r from-black to-gray-700 text-white px-4 py-2 rounded flex items-center transition-all duration-150"
                style={{ left: "100%", opacity: 0 }}
                ref={tipRef}
            >
                <div
                    className="bg-black h-3 w-3 absolute"
                    style={{ left: "-6px", transform: "rotate(45deg)" }}
                />
                {tooltipText}
            </div>
            {children}
        </div>
    );
}

A couple of clarifications, the tooltip always opens to the right in this case but you can always tweak the direction or even create a prop to control it

I'm using ref to avoid setting a state to show or hide the tooltip, these ways the component doesn't have to deal with re-renders

const tipRef = React.createRef(null);

and handling the show and hide events with onMouse API

    function handleMouseEnter() {
        tipRef.current.style.opacity = 1;
        tipRef.current.style.marginLeft = "20px";
    }
    function handleMouseLeave() {
        tipRef.current.style.opacity = 0;
        tipRef.current.style.marginLeft = "10px";
    }

There is a prop for the tooltip text and children to use this as a composition, so you may use the component like this

Now you just need to wrap an element where you want to show the tooltip at, for example on a Nextjs Link

    <Tooltip tooltipText="Shop Insights">
          <Link href="/insights">
                 <a>
                    <AiOutlineAlert className="text-3xl" />
                 </a>
          </Link>
    </Tooltip>

And you will get something like this...

Happy coding and don't eat too many candies today!

Syntactic sugar, why, when and how

Alex Suarez — Fri, 18 Sep 2020 17:09:39 +0000

The term Syntactic Sugar was coined by Peter J. Landin in 1964. In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.

The Why
It demonstrates the domain of native APIs, brings more flexibility and readability to the code, it can help others to find new ways to write more short and concise code, and I can go ahead all-day long.

When
Every time you have a change!

How... Let's go

 // don't
 let alex = personal.alex

 // do destructuring
 let {alex} = personal

// don't if variable asignation may not vary
var isSuperHuman = superhuman ? "is super human" : "nahh"

// use const instead
const isSuperHuman = superhuman ? "is super human" : "nahh"


// arrays to avoid for loops o foreach
arr.find(i => i.id === "01") // returns the object

// with destructuring
arr.find(({id}) => id === "01") // returns the object

arr.filter(({id}) => id === "01") // returns and array of matches elements

arr.some(({id}) => id === "01") // returns boolean value

arr.every(({type}) => type === "superhumen") // returns boolean value if every nodes matched the criteria

arr.reduce((acc, {age}) => acc + age, 0) // returns a reduced value in this case the sum of all ages

// concat and push are from the pass now we spread!
const a = [...arr, newElemet]

// or to place the new element at the top of the array
const a = [newElemet, ...arr]

// mergin to arrays
const a = [...arrB, ...arrC]

// or flatted!!
const a = [arrB, arrC].flat()

// get the unique values (names) from array, lets map?
const a = ...new Set(data.map(i => i.name))

// as array?
const a = [...new Set(data.map(i => i.name))]

But Alex I already know that man!

// number to strings?
100.toString() // "100"

// what about!
100 + "" // "100"

// strings to number?
Number("100") // 100
parseInt("100") // 100
parseFloat("100").toFixed(2) // 100.00

// what about!
"100" * 1 // 100

Of curse, I know that too!

If that is the case, my friend you may be the sweetest person in the whole world!

Just let me know how do you declare functions?


// as a declaration
function sum(a,b) {
  return a + b
}

// as expression 
const sum = function(a,b) {
  return a + b;
};

// as an arrow?
const sum = (b,c) => b + c

// as shorthand method definition?
const operation = {
  add: (a,b) => a + b
}

// or 
const operation = {
  add(a,b){return a + b}

See ya at the next sugar! Let me know yours.

A guide for Skeletons in React.

Alex Suarez — Sun, 16 Aug 2020 05:32:39 +0000

Hi there developers! In this article, I will be sharing my experience in implementing skeletons components. Why using skeletons on loading states, how to implement them, and when and how to use them. Let's go.

Why

Skeletons or placeholders are very powerful for loading states, it's proven that reduce the user anxiety during the application loading process, and that is because it shows to the user the upcoming content structure(at least is intended), also gives the idea that the app is working, it is almost like "We have everything ready but the text and the images just wait a sec", so the user feels the app is about to show up the final content but structurally we already delivered the UI.

Implementation

In short, the easiest way to implement and skeleton screen is by using an SVG (using Figma for example) and add some animations to it, but if you have the time and the skills, you can create a responsive as a JSX component (using tailwindcss of course ) :)

HOC, In-component conditional rendering or composition

Well, it depends, I think HOC are meant for auth wrapper nowadays, since functional components and hooks solved many of the problems HOC use to solve in the past, with that said if you want to keep your JSX cleaner as possible, the way to go is... Composition of course. Let's take a look at it.

Let's create a simple skeleton component that just returns "loading..." when the "on" prop is true

function Skeletons({children, on}) {
  return on ? <p>Loading...</p> : <>{children}</>
}

In your component...

import Skeletons from 'components/skeletons'

export default function App() {
  // useFetch is a custom hooks for data fetching
  const [data, loading, error] = useFetch(URL)
  return (
    <Skeletons on={loading}>
      <div className="App">
        {data.map(data => 
          <div key={data.id}>{data.name}</div>
        )}
      </div>
    </Skeletons>
  );
}

The above method is far better than creating the Skeleton component with no render condition on it.

function Skeletons({children}) {
  return <p>Loading...</p>
}

An then handle the conditional rendering on every single component to show the Skeletons ...

import Skeletons from 'components/skeletons'

export default function App() {
  // useFetch is a custom hooks for data fetching
  const [data, loading, error] = useFetch(URL)

  if(loading) return <Skeletons />
  return (
    <Skeletons on={loading}>
      <div className="App">
        {data.map(data => 
          <div key={data.id}>{data.name}</div>
        )}
      </div>
    </Skeletons>
  );
}

So compositions wins this fight, and if you ask me is the best way to implement Skeletons screens for your components loading states, it's easy to scalable and reusable.

So what's yours?

Context vs Hooks ({experiment})

Alex Suarez — Mon, 11 May 2020 00:19:34 +0000

Recently I came with an idea to change the app flow I am working on, It is not a big application, so I'm using context to wrap my components routes in other to share some data and states across components.

But last night, I thought. What if I replace the context for hooks and pass down those hooks from the routes? That should be faster right? In that way, I can use my hooks as HOF holding the states I need to use across the application, no more providers, no more context.

Well, I did a little experiment to confirm that the change I was going to do could be beneficial, so I created a simple condesandbox with and application holding two routes, that passes simple state value and a method that modifies that state, to both components, in one of them I called the method on a button click to change the state up in the tree, and the profiler results were this:

App with Context API

App with Hooks as HOF (passed down from the routes)

It's not a big difference but to my surprise, the context was faster that the hook! According to React docs:

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.”

Final thoughts:
Context beats Hooks as a single source of truth or HOF to manage your app state.

I'll need to test this out with more children components in other to check if the performance remains on the context side.

Photo by Gratisography, at Pexels