Skip to content

Export useSlot & useRenderProps #6552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArrayKnight opened this issue Jun 15, 2024 · 4 comments
Open

Export useSlot & useRenderProps #6552

ArrayKnight opened this issue Jun 15, 2024 · 4 comments

Comments

@ArrayKnight
Copy link

Provide a general summary of the feature here

The useSlot & useRenderProps hooks are very useful utilities within the Provider suite. Since we're already able to utilize Provider and the many different component contexts (as well as our own), it would be nice to have full access to related utilities

🤔 Expected Behavior?

useSlot & useRenderProps are exported by react-aria-components

😯 Current Behavior

Not currently exported

💁 Possible Solution

No response

🔦 Context

I'm currently utilizing useSlot to determine if a slot has been implemented or not, which allows for a flag to be provided for logic / styling branching

I'm expecting to have to implement new custom components that will want to implement their own render props

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@yihuiliao
Copy link
Member

At least for useRenderProps we're not too sure about exporting this and making it public. If you need to use it, we suggest that you just copy it for now since it's pretty straightforward.

@ArrayKnight
Copy link
Author

ArrayKnight commented Jul 2, 2024

export function callRenderProps<T extends object, R>(
  value: R | ((renderProps: T) => R),
  values: T
) {
  if (typeof value === 'function') {
    return (value as (renderProps: T) => R)(values);
  }

  return value;
}
import { type CSSProperties, type ReactNode, useMemo } from 'react';
import { type RenderProps } from '../../types';
import { callRenderProps } from '../../utils';

type RenderPropsHookOptions<T extends object> = RenderProps<T> & {
  values: T;
  defaultChildren?: ReactNode;
  defaultClassName?: string;
  defaultStyle?: CSSProperties;
};

export function useRenderProps<T extends object>({
  children: childrenProp,
  className: classNameProp,
  style: styleProp,
  defaultChildren,
  defaultClassName,
  defaultStyle,
  values,
}: RenderPropsHookOptions<T>) {
  return useMemo(() => {
    const children =
      callRenderProps(childrenProp, { ...values, defaultChildren }) ??
      defaultChildren;

    const className =
      callRenderProps(classNameProp, { ...values, defaultClassName }) ??
      defaultClassName;

    const style = callRenderProps(styleProp, { ...values, defaultStyle });

    return {
      ...(children != null ? { children } : {}),
      ...(className ? { className } : {}),
      ...(style || defaultStyle ? { style: { ...defaultStyle, ...style } } : {}),
    };
  }, [
    childrenProp,
    classNameProp,
    styleProp,
    defaultChildren,
    defaultClassName,
    defaultStyle,
    values,
  ]);
}

@musjj
Copy link

musjj commented Oct 19, 2024

Why is useContextProps exported but not useRenderProps? Makes no sense...

@raiyansarker
Copy link

#8013 implements it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants