Accessing FrintJS App Providers inside React.js Components

Fahad Heylaal
Nov 28, 2017 · 5 min read
Image for post
Image for post

Previously, we covered creating Apps with providers, and then rendering them with React.js in the browser and server. Today, we will see how we can access the providers defined in FrintJS Apps from inside React components.

Higher-order component

We ship a higher-order component (HoC) called observe from our React integration package frint-react.

The observe HoC allows you to wrap your target Component while giving you access to your FrintJS App’s instance, enabling you to prepare the props that you can pass to your target Component later.

You can either generate a synchronous props object, or stream it asynchronously using an Observable with this HoC.

Example App

For the examples below, we will assume this is how our App is defined and rendered with React:

Synchronous props

If you already know what props you want to pass to your target Component, and don’t need any asynchronous operations involved, and the props are not expected to change later, this solution is suitable for you.

Let’s assume you have a Component like this:

The component expects an appName prop, which we expect to be our FrintJS App’s name “MyApp”.

But how can we pass this as a prop? How can we even access the App’s instance?

We do it with our observe HoC:

The observe HoC receives a function, where you can access the App’s instance. Since you have access to App, you can get its name, and then return a props-compatible object, that your target component will receive when rendering.

You could also get a provider’s value, process it further, and then return the object. For e.g., we could also additionally pass a foo prop:

Now your target component will receive both appName and foo as props.

Streaming props

I wrote another article some time ago on how to stream props with RxJS in React components. I highly recommend you to read that too.

You may wonder by now, if the observe higher-order component is used for generating props synchronously, why is it called “observe” then?

That’s because observe HoC previously only supported returning an Observable, and returning plain objects was supported much later.

Imagine, you have a component like this:

The component receives an interval prop, that we expect to increment by 1 every second.

We could visualize it in a marble diagram here:

Image for post
Image for post
Illustration of props object inside your target component over time

In the first second, the interval prop is 1, then 2 and so on…

The interval logic can be expressed with RxJS in a variable like this:

Now gluing it all up using our observe HoC is as easy as:

What we just did above is prepare an interval$ Observable, and then map it to a props-compatible object, and return the final Observable.

The example above uses lettable operators using pipe method, which is introduced since RxJS v5.5.

The HoC will now take care of updating the props and keep passing it down to your target component.

While this example didn’t use any provider, but you can imagine the interval$ coming from a provider too instead:

Helper function

We also have a helper function called streamProps that we ship from our frint-react package. It is useful if you are combining a stream of props from various sources (involving both sync and async operations).

The above example could have been written like this:

Now when you return this props$ observable from your observe HoC, your target component will receive both foo and interval prop together.

While foo's value will always remain the same, interval will keep updating every second.

Benefits of this approach

Using the observe higher-order component encourages you to keep your React.js components as stateless as possible. This way, when you write your main components, you only need to worry about what props you receive, and nothing else.

And as long as your FrintJS App has something defined as a provider, you are allowed to access it from your components layer anywhere.

This approach also helps in moving a larger share of stateful logic to provider-level in FrintJS Apps, leaving your components responsible for rendering and passing data as props only.

FrintJS

The official FrintJS blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store