1.1.0 • Published 3 years ago

@tamarac/hoc v1.1.0

Weekly downloads
1
License
ISC
Repository
-
Last release
3 years ago

#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.

1.1.0

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago