Skip to content
Sandny Blog
  • Home
  • Java
  • JavaScript
  • AWS
  • Embedded
  • About
Higher order components react.js JavaScript

Higher order component wrappers using React.js and reusable components.

  • October 4, 2017November 21, 2019
  • by Coder Kai

Recently I happened to create a middle panel where different types of components could be rendered on top it. So the idea is, the panel should be a <div> wrapper around the middle content. For this kind of situation, higher order functions with components could come in handy to use.

Let’s say our middle content is order detail panel. First I had two buttons that displayed exactly same it was an expandable button. So I first created a button which could take the text and an action to be dispatched from when the onClick event fires.

Exapndable Buttons for Higher order components

I use stateless functions as much as I can to create components. And the state is managed with Redux.js. So the expandable button is as follows:

const DetailExpandableButton = (props) => {
  return (
    <div className="expandable-button">
      <div className="eb-text">{props.text}</div>
      <div className="eb-expand-button" onClick={props.action}>+</div>
    </div>
  );
}

This was used in order detail component as follows:

const CustomerDetails = ({showCustomer, showOrderType}) => {
  return (
    <div className="customer-details">
      <div className="add">{DetailExpandableButton({text: "Customer", action: showCustomer})}</div>
      <div className="add">{DetailExpandableButton({text: "Order Type", action: showOrderType})}</div>
    </div>
  )
}

And the order detail panel wrapped around with middle content. Note that the actions defined here are redux dispatch functions which are defined in another context. I have used them directly here to render other components.

export const CustomerDetailsMiddlePane = MiddlePane(CustomerDetails({
  showCustomer: CustomerActions.showCustomerDetails, 
  showOrderType OrderActions.showOrderTypes, 
}));

The middle content is a wrapper for the customer details and it will render the component passed to the middle content at runtime.

export const MiddlePane = (Content) => (props) => (
  <div className="middle-pane">
    <Content {...props}/>
  </div>
);

So that’s it. Now I have a middle pane which I can be reused to render some other components. And expandable button which could be literally used anywhere with the text and the action. It’s easier and much cleaner as I’m using only stateless functional components. There could be a need for stateful components (to manage tap events etc.) but its always easier to use more stateless ones.

Add SASS in webpack React Redux project
Adaptation of js apps and how predesigned abstractions could burn you
Coder Kai
A humble developer

Related articles

SSL Websocket using Nginx Proxy
SSL Websocket proxy with Nginx…
Change python version correctly
Python is not setting correct…
optimize React.js load time
How to optimize React.js app…
dismiss dropdowns when pressed on background with React.js
How to use IntersectionObserver to…
dismiss dropdowns when pressed on background with React.js
How to dismiss dropdowns when…
Javascript guide Strings
03. Javascript Guide – Strings
How to fetch data with useEffect
How to fetch data with…
add styles to stripe elements
How to add styles to…
Typescript
How to use Typescript with…
how to optimize react-native map view
How to optimize react-native map…
debounce with react hooks
Avoid multiple clicks using debounce…
Numbers inJavascript
02. Javascript Guide – Numbers
Introduction to Javascript
01. Javascript Guide – Introduction…
Nginx Load Balancer with docker…
Create React App Using npx
Difference Between npx and npm
Simple Tab View Using react-tabs
Use Dynamic Segments Routing in Ember 2.0
The Common Errors that beginner…
FCM Push Notification with React Native
How to setup FCM Push…
Frequent errors with Apollo Client
Query definition in GraphQL and…

Categories

  • android 3
  • Apollo Client 1
  • AWS 7
    • AppSync 5
    • EC2 1
    • EKS 1
    • Route53 1
  • AWS Amplify 1
  • Docker 1
  • Embedded 1
  • EmberJS 1
  • FCM 1
  • Godaddy 1
  • GraphQL 3
  • ios 1
  • Jasper 1
  • Java 10
    • Java 11 1
    • Java 14 1
  • JavaEE 2
  • JavaScript 32
    • Express.js 4
    • Javascript Guide 3
    • Node.js 1
    • react-native 4
    • React.js 15
    • Typescript 1
  • Kubernetes 1
  • machine learning 1
  • Maven 2
  • OCaml 3
  • react-native 4
  • ReactJS 3
  • sass 1
  • Server 6
  • spark 1
  • Ubuntu 4
  • Uncategorized 1
  • webpack 2

Recent Comments

  • ChesterCurdy on Create React App Using npx
  • RitaNasy555 on Difference Between npx and npm
  • megaword on The Common Errors that beginner React Developers Make

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • May 2022 1
  • December 2021 1
  • August 2021 1
  • July 2021 6
  • June 2021 3
  • February 2021 1
  • July 2020 1
  • December 2019 5
  • November 2019 6
  • October 2019 3
  • August 2019 1
  • March 2019 1
  • February 2019 1
  • January 2019 2
  • December 2018 1
  • September 2018 2
  • August 2018 1
  • June 2018 1
  • February 2018 1
  • November 2017 2
  • October 2017 5
  • September 2017 1
  • June 2017 1
  • May 2017 10
Sandny Blog space
Theme by Colorlib Powered by WordPress