Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support custom element and props in render

See original GitHub issue

The .render for rich text currently forces an additional div around the rendered elements, with no ability to customise the wrapper div nor any ability to pass props to that wrapper (e.g. a className).

As of React 16, components can render fragments so for React 16 the additional wrapper is not required. If you’re keeping React 15 compatibility, and want to keep the same interface for consistency, it would be useful to allow options to be passed to configure the element type to wrap with and any additional props to pass at least, e.g.

  render(richText, linkResolver, htmlSerializer, { tagName = 'div', props = {}) = {}) {
    const serializedChildren = PrismicRichText.serialize(richText, serialize.bind(null, linkResolver), htmlSerializer);
    const _props = Object.assign(propsWithUniqueKey(), props);
    return React.createElement(tagName, _props, serializedChildren);
  }

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:20 (12 by maintainers)

Top GitHub Comments

1reaction

trembycommented, Nov 28, 2017

Nice, I may try something like that. Thanks.

But I’d probably still rather have no wrapper!

1reaction

trembycommented, Nov 28, 2017

Would one way to allow custom props on the wrapper to provide an actual component? I was surprised not to find something like <PrismicRichText className="myClass" object={myRichTextObject} /> to be possible with this library when using JSX.

But since you guys are talking about possibly removing the wrapper entirely, that’d actually be preferable.

Eagerly awaiting a resolution to this.

Top Results From Across the Web

Rendering React Components With Custom Elements

A common approach to render a component in React is to call the ReactDOM.render method on a DOM element. If you want to...

3 Approaches to Integrate React with Custom Elements

Approach 2: Use a wrapper ... Our next attempt at using our custom element in our React application is to create a wrapper...

Web Components - React

Using Web Components in React. class HelloMessage extends React.Component { render() { return <div>Hello <x-search>{this.props.name}</x-search>!</div>; } }.

Wrapping React Components Inside Custom Elements - Gil Fink

Re-render when the title prop is changing. We will start by creating the custom element class and by defining it in the CustomElementRegistry:...

How To Customize React Components with Props

In this tutorial, you'll create custom components by passing props to your component. Props are arguments that you provide to a JSX element....