Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Render Props in Stencil

DZone 's Guide to

Render Props in Stencil

The render prop is a React technique to help with composition of more sophisticated rendering scenarios. We take a look at who to use this technique with Stencil as well.

· Web Dev Zone ·
Free Resource

Before I started to use Stencil, I worked a lot with React (and am still working with the library). While developing React components, you often need to use a render prop, so I wanted to see how it would work in a Stencil environment. As you might figure, it works in Stencil and this gave me the idea to write a short post to explain how to use the render prop in Stencil.

Render Prop

A render prop is just a name for a simple technique in which you pass a function to a component which will be used in the component render function. The reason to use a render prop is the ability for a component to share its inner state without exposing it to the outside.

You can read in more details about render prop in Michael Jackson 's post: 'Use a Render Prop!'

Show Me The Code

The known example for render prop usage is a mouse capture component that holds the current mouse position. It exposes a render function prop which will handle it's rendering. Let's take a look at an example of that component written in Stencil:

import { Component, State, Prop } from '@stencil/core';
import Point from "../../common/Point";

@Component({
  tag: 'mouse-handler',
  styleUrl: 'mouse-handler.css'
})
export class MouseHandler {
  @State() location: Point = { x: 0, y: 0 };
  @Prop() renderFunc: (Point) => void;

  constructor() {
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(evt) {
    this.location = new Point(evt.clientX, evt.clientY);
  }

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.renderFunc(this.location)}
      </div>
    );
  }
}

As you can see, the component expects a function called renderFunc which has the (Point) => void interface. When there is a mouse movement on the mouse-handler surface the inner location state is updated with the new current mouse position and the component is re-rendered. In the component render function, we use the renderFunc to render part of the component user interface. This function will be received from the mouse-handler wrapping component.

Let's take a look at a consuming component example:

import { Component } from '@stencil/core';

@Component({
  tag: 'mouse-container',
  styleUrl: 'mouse-draw.css'
})
export class MouseContainer {
  render() {
    return (
      <div>
        <mouse-handler renderFunc={({ x, y }) => (
          <h1>The mouse position is ({x}, {y})</h1>
        )}/>
      </div>
    );
  }
}

In the second component, we pass the function that the mouse-handler component will use. In the example, this function is just adding a header element with the mouse position it receives.

Summary

The render prop is a React technique to help with composition of more sophisticated rendering scenarios. You can use the same technique with Stencil as well.

Topics:
web dev ,react ,stencil ,render props

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}