Template as React component?

[bobylito]

What if we could directly pass React component as templates? It could make sense for people doing React already, no?

[vvo]

Yes I do think this would make sense if you are in a react environement.

But I am also wondering, when in a react environment, would you use our .widgets.* wrappers?

As a react user, maybe you would prefer to access our react components and then do whatever you want. But they would then need to do some good coding.

As I did not build any full react website, I am really not sure.

[pixelastic]

I have not enough experience with React to see if this would be valuable or not

[redox]

We did that while upgrading to React 0.14 (d880ea258363a536d6ab334353675e08acd377b3).

[bobylito]

@redox humm that's not what this issue is about. It's about being able to use a react component as it was a template. Conceptually they are the same so it would make sense to be able to do so.

[vvo]

Do we investigate more this? How would passing a react template work in details?

[bobylito]

class MyTemplateComponent extends React.Component {
    render(){
        return <div>{JSON.stringify(this.props,null,2)}</div>;
    }
}

search.addWidget(
    instantsearch.widgets.hits({
        templates : { hit: MyTemplateComponent }
    })
);

Something like that?

[pixelastic]

I really like this idea

[vvo]

:horse: CLOSING BOT SAYS:

This is very old and not done, reopen if you have the need and want to fix it

[Willianvdv]

@bobylito did you get this working? I'd love to Reactify our widget templates.

[bobylito]

@Willianvdv well I would love to have this working but I can't figure out a simple way to detect if a value is a really a react component :

• if it's a function it collides with the custom function that we can already use ( (data) => (string) vs (data) => (react stuff) )
• if it's an React Class, I don't know how to figure out if it's a constructor of a React Component or something else
• if it's an ES6 class, we might be more lucky because it will extend React.Component and we can use instanceof

What do you think? Am I missing something?

[vvo]

We could have a isJSX: true somewhere but even that I wonder what would be feasible and if we can even make it work

[VonD]

another option would be a function returning a React element instead of a string :

instantsearch.widgets.hits({
    templates : { hit: hit => <MyHitComponent hit={ hit } />  }
})

We can then use React.isValidElement to check the template function return value : if it's a string, use dangerouslySetInnerHTML, if it's a valid element, just render it.

What do you think?

[bobylito]

That's great! I didn't know about this api! And this is simple to implement! Go! (Exclamation mark overflow :P!!!)

[VonD]

@bobylito ok, I've submitted a PR, let me know if you want me to change/add anything

[bobylito]

Ok thanks @VonD!