Suggestion for the conditionals handling in the props

[kaspar-naaber]

Hi! Thank you for the great library. The only thing that seems to be missing is passing the breakpoint state as a prop so that prop value could change based on the viewport. I ended up adding a helper component that passes it. It is not ideal but maybe gives some ideas how to bake the functionality into the library core.

// Breakpointprovider.tsx
import { Children, cloneElement, isValidElement, ReactElement, ReactNode } from 'react';

import { type Breakpoint, Media } from '@eres-monorepo/shared/util/media-context';

interface BreakpointProviderProps {
  breakpoint: Breakpoint;
  children: ReactNode;
}

export interface BreakpointMatch {
  greaterThanOrEqual?: boolean;
  lessThan?: boolean;
}

export interface BreakpointMatchProp {
  mediaMatchProps?: BreakpointMatch;
}

const getMediaMatchProps = (props: BreakpointMatch) => ({
  greaterThanOrEqual: false,
  lessThan: false,
  ...props,
});

const enhanceChildrenWithBreakpointProp = (
  children: BreakpointProviderProps['children'],
  mediaMatchProps: BreakpointMatch,
) => {
  console.log('mediaMatchProps:', mediaMatchProps);
  return Children.map(children, (child) =>
    isValidElement(child) ? cloneElement(child as ReactElement, { mediaMatchProps }) : child,
  );
};

export const BreakpointProvider = ({ breakpoint, children }: BreakpointProviderProps): ReactElement => (
  <>
    <Media greaterThanOrEqual={breakpoint}>
      {enhanceChildrenWithBreakpointProp(children, getMediaMatchProps({ greaterThanOrEqual: true }))}
    </Media>

    <Media lessThan={breakpoint}>
      {enhanceChildrenWithBreakpointProp(children, getMediaMatchProps({ lessThan: true }))}
    </Media>
  </>
);

And for the usage the child component props must extend the BreakpointMatchProp

export interface SomeReactComponentProps extends BreakpointMatchProp {
  foo: string;
  bar: string;
}

<BreakpointProvider breakpoint="sm">
  <SomeReactComponent /> 
</BreakpointProvider>

Now the SomeReactComponent has its onw props and in addigion the breakpoints too.

export const SomeReactComponent = ({
  foo,
  bar,
  mediaMatchProps,
}: SomeReactComponentProps): ReactElement => (
  <div className={mediaMatchProps.greaterThanOrEqual ? 'greater' : 'less'}>
  {mediaMatchProps.less ? foo : bar}
</div>
)

[damassi]

Thanks for the suggestion! I'm somewhat hesitant to add additional features given the overall existing complexity (and it seems like a simple functional wrapper like you've written above does the trick).

Can you perhaps show how this would look baked into the lib, used in JSX and utilizing the hypothetical new api?