CODEWITHSUNDEEP
javascriptreactjslit-element
funfelfonfafis
funfelfonfafis

Reputation: 187

How to pass value from react to lit-element props

I am trying to invoke a lit-element component in my React project and would like to pass a value to props into a lit-element component from React, but without success. I mean about props .config. In react I can't use dot. It is possible to get around it somehow and pass value to props .config?

Lit-element example:

<custom-tooltip .config=${{ position: 'right' }}>
  <custom-button slot="invoker" class="demo-tooltip">Settings</custom-button>
  <div slot="content">Settings and preferences<div>
</custom-tooltip>

My react code:

<custom-tooltip> //in this place .config={} not working
    {this.props.children}
    <div slot="content">{this.props.text}</div>
</custom-tooltip>

Upvotes: 2

Views: 2228

Answers (2)

Justin Formentin
Justin Formentin

Reputation: 294

You're correct that you can't use the dot in React. The other issue is that React isn't actually setting the element "property", and instead is just setting the attribute. Attributes are only ever strings, so you can't pass objects, arrays, or functions to your web component like you would with any other React component or JSX.

This is why

<custom-tooltip config={{ position: 'right' }}>

doesn't work.

But, lit-element is able to convert these strings for you, if you tell it what to do.

First, you need to make sure you are declaring the config property in your custom-tooltip element. This is so lit-element can properly track and convert the property. Like this

@property({ type: Object }) config

Now, you have two options.

First, you can pass it as a properly stringified object.

<custom-tooltip config={'{ "position": "right" }'}>

Or second, you can use a library like reactify-wc

const CustomTooltip = reactifyWc("custom-tooltip");
    
<CustomTooltip config={{ position: 'right' }}>

Using "react to web component" libraries makes it easy to do this, so you don't need to worry about it and just use web components within your JSX like you would with any other JSX. I would suggest this if you know you're going to need to pass a lot of non-string properties from your React components to your web components.

Upvotes: 3

Hastaroth
Hastaroth

Reputation: 51

The . is used for property binding in lit-element template. It will not work in JSX.

Once you have define a component with a property using @Property() in lit-element, that property can be assigned directly from html. In this case you want to use the binding syntax for JSX.

It would simple be:

<custom-tooltip config={{ position: 'right' }}> 
    {this.props.children}
    <div slot="content">{this.props.text}</div>
</custom-tooltip>

Upvotes: 0

Related Questions