@tamarac/hoc
v1.1.0
Published
Tamarac Higher-Order Components
Downloads
8
Readme
#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.