DEV Community: Jacob Gavin

React Children for grid views

Jacob Gavin — Tue, 28 Dec 2021 15:20:44 +0000

I sometimes come across scenarios where I want to display some Chips, or Buttons in a grid kind of layout like this

But I want to keep my component clean and reduced of margin/padding boxes. I don't always know what kind of component will be inside the box and I don't want to add CSS properties for each kind of element either. I usually use reacts Children to wrap the child components with a box component.

Bare in mind that use mui.

The first thing you might come to think about is doing something like this

function MyComponent(): JSX.Element {
    return (
        <CardContent>
            <Box mr={1] mb={1}>
                <Chip label="Expired" />
            </Box>
            <Box mr={1] mb={1}>
                <Chip label="Pending" />
            </Box>
            <Box mr={1] mb={1}>
                <Chip label="Valid" />
            </Box>
       </CardContent>
    );
}

And that works okay but it kind of hides what's important in this component, which is the <Chip /> components. The Material UI <Box /> component is just noise and it also adds extra nesting. And we don't like to much nesting, it's hard to read and even harder to review in a PR.

What we can do instead is to let our <CardContent /> add that <Box /> component around it childrens automatically with a thing called React.Children.

I've added an example from our codebase down below that uses Children which allows you to iterate all the children.

import { Children, isValidElement } from 'react';
// other imports

export default function CardWithPaddedContent(props: Props): JSX.Element {
    const classes = useStyles(props);
    const { children, ...rest } = props;

    const childrenWithPadding = Children.map(children, (child) => {
        if (!isValidElement(child)) {
            return null;
        }
        return <Box mb={1} mr={1}>{child}</Box>;
    });

    return (
        <CardContent {...rest} classes={classes} >
            {childrenWithPadding }
        </CardContent >
    );
}

The key part of this component is the part where I can iterate the children that gets passed to this component. I have to check if its a valid react element, if it isn't then I just return null otherwise I return the child wrapped in Material UIs <Box /> component with some bottom and right margin

Now we can go back to our original component and refactor it like this

function MyComponent(): JSX.Element {
    return (
        <CardWithPaddedContent>
            <Chip label="Expired" />
            <Chip label="Pending" />
            <Chip label="Valid" />
       </CardWithPaddedContent>
    );
}

And voilà! It looks so much cleaner and the DX get so much better because you can more easily see what's going on in this component.

Why don't add css styling to the <Chip /> component you might wonder
Well, I like to keep the small "dumb" component as dumb as they possible can be. They don't know in which context they will be used and adding margin/padding to them in this scenario will probably make them more complex.

Just add a padding/margin prop to the chip then
Could do that as well but I don't like that. A component should have as few props as possible or you can end up in a "aprocalypse" where small component have so many props that you after a while don't know whats what.

React router v6 useSearchParams

Jacob Gavin — Sat, 11 Dec 2021 15:35:41 +0000

How I did a more powerfull useSearchParams hook

With react router v5 I was using a library called use-query-params.
It had this great hook called useQueryParam which let you manage 1 query parameter in the same way as useState worked.

One great thing about useQueryParam is that it respects all other queries that you currently store in the url.
Meaning it only updates the value that you set out each hook the be responsible for

function SearchInput() {
    const [searchTerm, setSearchTerm] = useQueryParam('q', StringParam);

    return <input onChange={(event) => setSearchTerm(event.target.value)} value={searchTerm} />
}

If you then had other components that updated other url parameters like filters and so on it still kept my "q"-parameter intact.

In React router v6 they expose a hook called useSearchParams which is great and it was really missing something like that from v5.
The only problem (that I think) is the fact that it overrides all other url parameters so you constantly have to have the entire url param object to update it with. But I want to have different component handling different parts of the url parameters.
That's why I wrote a new hook with inspiration from the use-query-param library.

I posted the entire hook down below. I utilized serialize-query-param library which is authored by the same person who wrote use-query-params. The hook I wrote works in the same way as useState.

function SearchInput() {
    const [searchTerm, setSearchTerm] = useSearchParam('q', StringParam);

    const changeSearchTerm = (event: React.ChangeEvent<HTMLInputElement>): void => {
        setSearchTerm(event.target.value, 'replace');
        // you could also use a callback function to set the value like this
        setSearchTerm((oldValue) => {
            // do something with oldValue if you like

            return event.target.value;
        }, 'replace') // replace or push to url (push is default)
    }

    return <input onChange={} value={searchTerm} />
}

This is the end result of the hook I wrote. It's pretty straight forward. Unfortonatly I'm using UNSAFE_NavigationContext from react router. As far as I can tell it's okayish to use it. There are some issues on the react-router repo discussing this but as of writing this they
are probably not going to export a hook that can do what I want since they want to keep react-router lightweight but hopefully in the future they will expose this context in a more friendly way.

If you are using it in production, make sure to test it well.

import { isString } from 'lodash';
import { useContext } from 'react';
import { UNSAFE_NavigationContext, useSearchParams } from 'react-router-dom';
import { QueryParamConfig, StringParam } from 'serialize-query-params';

type NewValueType<D> = D | ((latestValue: D) => D);
type UrlUpdateType = 'replace' | 'push' | undefined;
type UseSearchParam<D, D2 = D> = [D2, (newValue: NewValueType<D>, updateType?: UrlUpdateType) => void];

export default function useSearchParam<D, D2 = D>(
    name: string,
    config: QueryParamConfig<D, D2> = StringParam as QueryParamConfig<any>,
): UseSearchParam<D, D2> {
    const [searchParams, setSearchParams] = useSearchParams();
    const { navigator } = useContext(UNSAFE_NavigationContext);

    const setNewValue = (valueOrFn: NewValueType<D>, updateType?: UrlUpdateType): void => {
        let newValue;
        const value = searchParams.get(name);
        if (typeof valueOrFn === 'function') {
            // eslint-disable-next-line @typescript-eslint/ban-types
            newValue = (valueOrFn as Function)(config.decode(value));
        } else {
            newValue = valueOrFn;
        }
        const encodedValue = config.encode(newValue);

        const params = new URLSearchParams((navigator as any).location.search);

        if (isString(encodedValue)) {
            params.set(name, encodedValue);
        } else {
            params.delete(name);
        }
        setSearchParams(params, { replace: updateType === 'replace' });
    };

    const decodedValue = config.decode(searchParams.get(name));
    return [decodedValue, setNewValue];
}

React router v6 useSearchParams

Jacob Gavin — Sat, 11 Dec 2021 15:28:28 +0000