@tamarac/hoc v1.1.0

#Tamarac Higher-Order Components

Higher-Order Components for injecting functionality into components.

Getting Started

Install the component and add an instance to your app.

npm install @tamarac/hoc

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import '@tamarac/tamarac-bootstrap/dist/tamarac-bootstrap.css';
import { withModal } from '@tamarac/hoc';

//This is component you wish to wrap with hoc functionality
// prettier-ignore
const CellContents = ({ text }) => (<span>{text}</span>);

const CellContentsWithModal = withModal({
  title: 'Edit Something',
  bodyContent: 'Content Goes Here',
  primaryButtonText: 'OK',
  secondaryButtonText: 'Cancel'
})(CellContents);

<CellContentsWithModal text={'Account Name'}> //results in a button with the text 'Account Name' that launches a modal

Since an HOC is basically a function that takes a Component as an argument and returns a new Component, we can use multiple HOCs to compose more complex behavior:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import '@tamarac/tamarac-bootstrap/dist/tamarac-bootstrap.css';
import { withLink, withIcon, withButtonDropdown, compose } from '@tamarac/hoc';

//This is component you wish to wrap with hoc functionality
// prettier-ignore
const CellContents = ({ text }) => (<span>{text}</span>);

const CellContenstWithLinkWithIconWithButtonDropdown = compose(
  withLink({ link: '#' }),
  withIcon({ after: '▷' }),
  withButtonDropdown({...})
);

<CellContenstWithLinkWithIconWithButtonDropdown text={'Account Name'}>

HOCs

• withLink - {link, target}
• withIcon - {before, after}
• withModal - see @tamarac/reactui for specifics
• withButtonDropdown - see @tamarac/reactui for specifics

Helpers

@tamarac/hoc exports a compose helper to prevent rightward drift when using multiple HOCs to compose a single component. It's analogous to Redux's compose function, so if you're using Redux you can just use it's compose instead.