Allow props to be passed to custom components

[kenny-f]

When specifying custom components I would like to provide custom props

From the example options below I cannot provide props to BulletList or Text

const processor = unified()
  .use(rehype2react, {
    createElement: React.createElement,
    components: {
      p: Text,
      ul: BulletList,
    },
  });

It would be good to support something like

const processor = unified()
  .use(rehype2react, {
    createElement: React.createElement,
    components: {
      p: { c: Text, props: { ... },
      ul: { c: BulletList, props: { ... }
    },
  });

Why would I want this?

To change the behaviour or styles of the default BulletList (eg) via a prop for a specific case.

If I had a function like:

export const hastToReact = (
  ast,
  components = {},
): ReactNode => {
  const processor = unified()
    .use(rehype2react, {
      createElement: React.createElement,
      Fragment: React.Fragment,
      components: {
        p: Text,
        ul: BulletList,
        ...components,
      },
    });

  return = processor.stringify(hastNode);
};

I could override it by:

hastToReact(ast, { ul: {c: BulletList, props: { ... } }})

Problem

This would be a breaking change to the current api.

Happy to create a PR for this if it is deemed useful or if someone knows if this is supported already and/or has a workaround please drop a comment.

[wooorm]

As in, you mean extra props to pass to your bulletlist?

Does a <MyBulletList> which passes things through to BulletList and spreads in other props too, not work?

[kenny-f]

@wooorm

As in, you mean extra props to pass to your bulletlist?

Yes that is what I mean.

I guess that I could work around it by creating a wrapping component, but it gets a bit tedious if I had <TwoColumnBulletList>, <ThreeColumnBulletList>, <FourColumnBulletList> etc...

[wooorm]

How would that new example work with options-level predefined props? Still tedious, right? 🤔

[kenny-f]

Thanks @wooorm decided to create inline components that pass the props down to the component. Closing as there is no further action needed