Playgrounds for React patterns: compound components and render as a props

Reading Time: 2 minutes

During my preparation to talk in Verona on ReactJSDay I have tried to dive deep in some patterns in React that have been broadly discussed (at least in my twitter feed 🙂  ). For me, one of the best ways to understand the code better is by playing with it a little bit, so I have created a few simple codepen playgrounds that were based on the existing code samples. Maybe you will find them useful as well.

1. Compound Components

See the Pen Compound Components – Tab example by Olena Sovyn (@Kiwka) on CodePen.

I have first found this pattern (probably more correctly about how this pattern is named, as I was unconsciously used it before) when I was reading the program of some React training that was planned in London. Ryan Florence has made talk about this pattern – https://www.youtube.com/watch?v=hEGg-3pIHlE. My codepen playground contains the same example about which Ryan was talking in his speech. The example was taken from this repository https://github.com/mikkoj/react-training-material/tree/master/subjects/06-compound-components and just slightly modified and simplified.

2. Render prop

See the Pen Use a Render Prop by Olena Sovyn (@Kiwka) on CodePen.

At the time when I was preparing my talk, this pattern was quite hyped. It is good to check Michael post about this pattern https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce or talk https://www.youtube.com/watch?v=BcVAq3YFiuc, of you hearing about this pattern for the first time. I was very happy that I have created this playground, as it helped me personally slightly demystified this all idea with render prop. At the beginning, I was slightly confused that there is some more “magic” under the render prop, but actually it is possible to name this property whatever you want, and it will still work (just make sure that you have change name of the property in both places – where it is defined and where it is used). If you haven’t done this before and was as well confused by this pattern – go and play with it in the playground.

The second thing that came up to me when I was playing with this idea in the playground was that it actually represents the well-known pattern, that was even included in React official documentation – children as function. Just small changes needed and here it is:

See the Pen Use a Render Prop – Children by Olena Sovyn (@Kiwka) on CodePen.

I really like a possibility to experiment with code for better understanding with codepen playground. I have created quite a few when I was created customised RichEditor based on the Draft.js: http://frontendgirl.com/8-playgrounds-for-examples-from-official-draft-js-repository-v-0-10-0/. They as well are based on the existed code samples, but it is quite easier to understand how it works when it is possible to momentarily see visual or functional changes.  + There is no need to setup environment (even with creat-react-app) or do anything else, simple configuration to include needed libraries and everything is ready for the experimentation.

P.S. Have you noticed that both talks about these patterns were presented in Phoenix. Look like it is very hot React place to be 🙂

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Olena Sovyn
Staff Software Engineer (London, UK). I ❤ React, Redux, lodash, React Storybook, and functional programming overall. Always open to learning something new

1 Comment

  1. Hello! Nice sharing.

    I am currently learning the compound-components pattern react-wisely….
    In a similar fashion as the good old ** (see below), where would you put the onchange functionality for the Tabs example? In my case I need to act on the change of a tabs with a function and I need to know in this function which tab I clicked and act upon that for a side-effect.
    Does it make sense to put it on the TabList?
    Like this: …
    Or maybe on the Tabs? Like this: …

    I am playing around with it, but please give your thoughts!

    reference:**:

    something1
    something2

Leave a Reply to Didrik Lind Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Spelling error report

The following text will be sent to our editors: