A set of enhancers for @truefit/bach inspired by recompose.
npm install @truefit/bach-recompose @truefit/bach
or
yarn add @truefit/bach-recompose @truefit/bach
You can read more about the ideas behind @truefit/bach in the readme found there. This library is targeted at replicating a decent chunk of the functionality provided by recompose.
As the author of recompose points out in his deprecation notice, you can accomplish many (although not all) of the same behaviors provided by this library with a combination of hooks. That said, we think there is still merit to writing code that can be understood at a glance without deep knowledge of the frameworks used and in our opinion that is the role many of these functions play.
Not all of the enhancers require hooks to accomplish their tasks, that said, they follow the same architectural design as all enhancers (logic to be combined into a single component).
You can find a full React project with simple working examples of each hook, as well as more complex examples that combine hooks here: https://github.com/TrueFit/bach-examples.
Allows you to transform the props from that point in the composition into a new map of props.
Note: this can be a dangerous utility as it completely replaces the props object that has been built to this point. Consider that when writing your mapping logic
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| fn | js function | accepts a js object "props" and returns a js object to be used as "props" from then on |
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {mapProps} from '@truefit/bach-recompose';
type PublicProps = {
note: string;
};
type InternalProps = {
message: string;
};
const ChildContent = ({message}: InternalProps) => (
<div>
<h1>mapProps</h1>
<h2>Message: {message}</h2>
</div>
);
const Child = compose<PublicProps>(
mapProps<PublicProps, InternalProps>(({note, ...props}) => ({message: note, ...props})),
)(ChildContent);
export default () => <Child note="Hello World!" />;import React from 'react';
import {compose} from '@truefit/bach';
import {mapProps} from '@truefit/bach-recompose';
const ChildContent = ({message}) => (
<div>
<h1>mapProps</h1>
<h2>Message: {message}</h2>
</div>
);
const Child = compose(
mapProps(({note, ...props}) => ({message: note, ...props})),
)(ChildContent);
export default () => <Child note="Hello World" />;Allows you to quickly define multiple withCallback instances in one definition.
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| map | js object | a js object that contains a map of keys and functions. Each key will be passed to the wrapped component. |
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {withHandlers} from '@truefit/bach-recompose';
type Props = {
sayHello: () => void;
sayGoodbye: () => void;
};
const Component = ({sayHello, sayGoodbye}: Props) => (
<div>
<h1>With Handlers</h1>
<div>
<button type="button" onClick={sayHello}>
Say Hello
</button>
</div>
<div>
<button type="button" onClick={sayGoodbye}>
Say Goodbye
</button>
</div>
</div>
);
export default compose(
withHandlers<Props>({
sayHello: () => () => {
console.log('Hello');
},
sayGoodbye: () => () => {
console.log('Goodbye');
},
}),
)(Component);import React from 'react';
import {compose} from '@truefit/bach';
import {withHandlers} from '@truefit/bach-recompose';
const Component = ({sayHello, sayGoodbye}) => (
<div>
<h1>With Handlers</h1>
<div>
<button onClick={sayHello}>Say Hello</button>
</div>
<div>
<button onClick={sayGoodbye}>Say Goodbye</button>
</div>
</div>
);
export default compose(
withHandlers({
sayHello: (props) => () => {
console.log('Hello');
},
sayGoodbye: (props) => () => {
console.log('Goodbye');
},
}),
)(Component);Underlying React Hook
Allows for an easier transition from class based components. We use the traditional function names componentDidMount, componentDidUpdate, and componentWillUnmount.
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| map | js object | a js object that contains a map of keys and functions. The allowed keys are componentDidMount, componentDidUpdate, and componentWillUnmount. |
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {withLifecycle} from '@truefit/bach-recompose';
const Component = () => (
<div>
<h1>With Lifecycle</h1>
</div>
);
export default compose(
withLifecycle<any>({
componentDidMount: props => {
console.log('Component Did Mount: ', props);
},
componentDidUpdate: (props, prevProps) => {
console.log('Component Did Update', props, prevProps);
},
componentWillUnmount: props => {
console.log('Component Will Unmount', props);
},
}),
)(Component);import React from 'react';
import {compose} from '@truefit/bach';
import {withLifecycle} from '@truefit/bach-recompose';
const Component = () => (
<div>
<h1>With Lifecycle</h1>
</div>
);
export default compose(
withLifecycle({
componentDidMount: (props) => {
console.log('Component Did Mount: ', props);
},
componentDidUpdate: (props, prevProps) => {
console.log('Component Did Update', props, prevProps);
},
componentWillUnmount: (props) => {
console.log('Component Will Unmount', props);
},
}),
)(Component);Underlying React Hooks
Allows you to rename a property from one key to another.
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| oldName | string | the name of the property to rename |
| newName | string | the new name of the property |
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {renameProp} from '@truefit/bach-recompose';
type ExternalProps = {
note: string;
};
type InternalProps = {
message: string;
};
const ChildContent = ({message}: InternalProps) => (
<div>
<h1>renameProp</h1>
<h2>Message: {message}</h2>
</div>
);
const Child = compose<ExternalProps>(
renameProp<InternalProps>('note', 'message')
)(ChildContent);
export default () => <Child note="Hello World" />;import React from 'react';
import {compose} from '@truefit/bach';
import {renameProp} from '@truefit/bach-recompose';
const ChildContent = ({message}) => (
<div>
<h1>renameProp</h1>
<h2>Message: {message}</h2>
</div>
);
const Child = compose(
renameProp('note', 'message'),
)(ChildContent);
export default () => <Child note="Hello World" />;Allows you to rename multiple properties from one set of keys to another.
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| propertyNameMap | js object | a map of the old keys to their new keys |
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {renameProps} from '@truefit/bach-recompose';
type ExternalProps = {
note: string;
};
type InternalProps = {
message: string;
};
const ChildContent = ({message}: InternalProps) => (
<div>
<h1>renameProp</h1>
<h2>Message: {message}</h2>
</div>
);
const Child = compose<ExternalProps>(
renameProps<InternalProps>({note: 'message'}),
)(ChildContent);
export default () => <Child note="Hello World" />;import React from 'react';
import {compose} from '@truefit/bach';
import {renameProps} from '@truefit/bach-recompose';
const ChildContent = ({message}) => (
<div>
<h1>mapProps</h1>
<h2>Message: {message}</h2>
</div>
);
const Child = compose(
renameProps({note: 'message'}),
)(ChildContent);
export default () => <Child note="Hello World" />;Allows you to specify a conditional function. If the condition is true, compose will render the specified component
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| conditional | js function | a function that returns a boolean value |
| component | react component | the component to render if the condition is true |
Example
import React from 'react';
import {compose, withEffect, withState} from '@truefit/bach';
import {renderIf} from '@truefit/bach-recompose';
type Props = {
loading: boolean;
setLoading: (b: boolean) => void;
};
const Loading = () => <div>Loading</div>;
const Content = () => <div>Content</div>;
export default compose(
withState('loading', 'setLoading', true),
withEffect<Props>(({setLoading}) => {
setTimeout(() => {
setLoading(false);
}, 2500);
}, []),
renderIf<Props>(({loading}) => loading, Loading),
)(Content);import React from 'react';
import {compose, withEffect, withState} from '@truefit/bach';
import {renderIf} from '@truefit/bach-recompose';
const Loading = () => <div>Loading</div>;
const Content = () => <div>Content</div>;
export default compose(
withState('loading', 'setLoading', true),
withEffect(({setLoading}) => {
setTimeout(() => {
setLoading(false);
}, 2500);
}, []),
renderIf(({loading}) => loading, Loading),
)(Content);Underlying React Hooks
Short circuits the render chain and renders nothing.
Enhancer Signature
This enhancer has no parameters
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {renderNothing} from '@truefit/bach-recompose';
const Content = () => <div>Something</div>;
export default compose(renderNothing())(Content);import React from 'react';
import {compose} from '@truefit/bach';
import {renderNothing} from '@truefit/bach-recompose';
const Content = () => <div>Something</div>;
export default compose(renderNothing())(Content);Allows you to supply multiple properties to add the props passed to the wrapped component.
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| propertyMap | js object | a map of the keys to their values (objects or functions) |
Example
import React from 'react';
import {compose} from '@truefit/bach';
import {withProps} from '@truefit/bach-recompose';
type Props = {
title: string;
description: string;
};
const WithProps = ({title, description}: Props) => (
<div>
<h1>withProps</h1>
<h2>Title: {title}</h2>
<h2>Description: {description}</h2>
</div>
);
export default compose(
withProps<Props>({
title: 'Hello',
description: () => 'World',
}),
)(WithProps);import React from 'react';
import {compose} from '@truefit/bach';
import {withProps} from '@truefit/bach-recompose';
const WithProps = ({title, description}) => (
<div>
<h1>withProps</h1>
<h2>Title: {title}</h2>
<h2>Description: {description}</h2>
</div>
);
export default compose(
withProps({
title: 'Hello',
description: (props) => 'World'
}),
)(WithProps);Underlying React Hooks
Allows you to specify a comparison function to optimize the re-rendering of the component.
Enhancer Signature
| Parameter | Type | Description |
|---|---|---|
| areEqual | js func | a function that accepts two parameters - prevProps, nextProps and returns a boolean as to if they should be considered equal. If true is returned, the component will not rerender |
Example
import React from 'react';
import {compose, withState, withCallback} from '@truefit/bach';
import {memo} from '@truefit/bach-recompose';
type MemoProps = {
count: number;
};
const Memo = compose<MemoProps>(
memo<MemoProps>((prevProps, nextProps) => {
return nextProps.count % 2 === 0;
}),
)(({count}: MemoProps) => (
<>
<h1>Memo</h1>
<h2>{count}</h2>
</>
));
type WrapperProps = {
count: number;
setCount: (n: number) => void;
increment: () => void;
};
export default compose(
withState<WrapperProps, number>('count', 'setCount', 0),
withCallback<WrapperProps>('increment', ({count, setCount}) => () => {
setCount(count + 1);
}),
)(({count, increment}: WrapperProps) => (
<div>
<Memo count={count} />
<button type="button" onClick={increment}>
Increment
</button>
</div>
));import React from 'react';
import {compose, withState, withCallback} from '@truefit/bach';
import {memo} from '@truefit/bach-recompose';
const Memo = compose(
memo((prevProps, nextProps) => {
return nextProps.count % 2 === 0;
}),
)(({count}) => (
<>
<h1>Memo</h1>
<h2>{count}</h2>
</>
));
export default compose(
withState('count', 'setCount', 0),
withCallback('increment', ({count, setCount}) => () => {
setCount(count + 1);
}),
)(({count, increment}) => (
<div>
<Memo count={count} />
<button onClick={increment}>Increment</button>
</div>
));Underlying React HOC