Gathering detailed insights and metrics for @truefit/bach-recompose
Gathering detailed insights and metrics for @truefit/bach-recompose
Gathering detailed insights and metrics for @truefit/bach-recompose
Gathering detailed insights and metrics for @truefit/bach-recompose
A set of enhancers for @truefit/bach inspired by recompose.
npm install @truefit/bach-recompose
Typescript
Module System
Node Version
NPM Version
TypeScript (91.25%)
JavaScript (8.75%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
4 Stars
36 Commits
1 Forks
9 Watchers
6 Branches
9 Contributors
Updated on Oct 18, 2021
Latest Version
2.1.0
Package Id
@truefit/bach-recompose@2.1.0
Unpacked Size
52.45 kB
Size
13.67 kB
File Count
44
NPM Version
7.6.3
Node Version
15.11.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
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
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {mapProps} from '@truefit/bach-recompose'; 4 5type PublicProps = { 6 note: string; 7}; 8 9type InternalProps = { 10 message: string; 11}; 12 13const ChildContent = ({message}: InternalProps) => ( 14 <div> 15 <h1>mapProps</h1> 16 <h2>Message: {message}</h2> 17 </div> 18); 19 20const Child = compose<PublicProps>( 21 mapProps<PublicProps, InternalProps>(({note, ...props}) => ({message: note, ...props})), 22)(ChildContent); 23 24export default () => <Child note="Hello World!" />;
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {mapProps} from '@truefit/bach-recompose'; 4 5const ChildContent = ({message}) => ( 6 <div> 7 <h1>mapProps</h1> 8 <h2>Message: {message}</h2> 9 </div> 10); 11 12const Child = compose( 13 mapProps(({note, ...props}) => ({message: note, ...props})), 14)(ChildContent); 15 16export 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
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {withHandlers} from '@truefit/bach-recompose'; 4 5type Props = { 6 sayHello: () => void; 7 sayGoodbye: () => void; 8}; 9 10const Component = ({sayHello, sayGoodbye}: Props) => ( 11 <div> 12 <h1>With Handlers</h1> 13 <div> 14 <button type="button" onClick={sayHello}> 15 Say Hello 16 </button> 17 </div> 18 <div> 19 <button type="button" onClick={sayGoodbye}> 20 Say Goodbye 21 </button> 22 </div> 23 </div> 24); 25 26export default compose( 27 withHandlers<Props>({ 28 sayHello: () => () => { 29 console.log('Hello'); 30 }, 31 sayGoodbye: () => () => { 32 console.log('Goodbye'); 33 }, 34 }), 35)(Component);
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {withHandlers} from '@truefit/bach-recompose'; 4 5const Component = ({sayHello, sayGoodbye}) => ( 6 <div> 7 <h1>With Handlers</h1> 8 <div> 9 <button onClick={sayHello}>Say Hello</button> 10 </div> 11 <div> 12 <button onClick={sayGoodbye}>Say Goodbye</button> 13 </div> 14 </div> 15); 16 17export default compose( 18 withHandlers({ 19 sayHello: (props) => () => { 20 console.log('Hello'); 21 }, 22 sayGoodbye: (props) => () => { 23 console.log('Goodbye'); 24 }, 25 }), 26)(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
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {withLifecycle} from '@truefit/bach-recompose'; 4 5const Component = () => ( 6 <div> 7 <h1>With Lifecycle</h1> 8 </div> 9); 10 11export default compose( 12 withLifecycle<any>({ 13 componentDidMount: props => { 14 console.log('Component Did Mount: ', props); 15 }, 16 17 componentDidUpdate: (props, prevProps) => { 18 console.log('Component Did Update', props, prevProps); 19 }, 20 21 componentWillUnmount: props => { 22 console.log('Component Will Unmount', props); 23 }, 24 }), 25)(Component); 26
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {withLifecycle} from '@truefit/bach-recompose'; 4 5const Component = () => ( 6 <div> 7 <h1>With Lifecycle</h1> 8 </div> 9); 10 11export default compose( 12 withLifecycle({ 13 componentDidMount: (props) => { 14 console.log('Component Did Mount: ', props); 15 }, 16 17 componentDidUpdate: (props, prevProps) => { 18 console.log('Component Did Update', props, prevProps); 19 }, 20 21 componentWillUnmount: (props) => { 22 console.log('Component Will Unmount', props); 23 }, 24 }), 25)(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
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {renameProp} from '@truefit/bach-recompose'; 4 5type ExternalProps = { 6 note: string; 7}; 8 9type InternalProps = { 10 message: string; 11}; 12 13const ChildContent = ({message}: InternalProps) => ( 14 <div> 15 <h1>renameProp</h1> 16 <h2>Message: {message}</h2> 17 </div> 18); 19 20const Child = compose<ExternalProps>( 21 renameProp<InternalProps>('note', 'message') 22)(ChildContent); 23 24export default () => <Child note="Hello World" />;
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {renameProp} from '@truefit/bach-recompose'; 4 5const ChildContent = ({message}) => ( 6 <div> 7 <h1>renameProp</h1> 8 <h2>Message: {message}</h2> 9 </div> 10); 11 12const Child = compose( 13 renameProp('note', 'message'), 14)(ChildContent); 15 16export 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
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {renameProps} from '@truefit/bach-recompose'; 4 5type ExternalProps = { 6 note: string; 7}; 8 9type InternalProps = { 10 message: string; 11}; 12 13const ChildContent = ({message}: InternalProps) => ( 14 <div> 15 <h1>renameProp</h1> 16 <h2>Message: {message}</h2> 17 </div> 18); 19 20const Child = compose<ExternalProps>( 21 renameProps<InternalProps>({note: 'message'}), 22)(ChildContent); 23 24export default () => <Child note="Hello World" />;
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {renameProps} from '@truefit/bach-recompose'; 4 5const ChildContent = ({message}) => ( 6 <div> 7 <h1>mapProps</h1> 8 <h2>Message: {message}</h2> 9 </div> 10); 11 12const Child = compose( 13 renameProps({note: 'message'}), 14)(ChildContent); 15 16export 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
1import React from 'react'; 2import {compose, withEffect, withState} from '@truefit/bach'; 3import {renderIf} from '@truefit/bach-recompose'; 4 5type Props = { 6 loading: boolean; 7 setLoading: (b: boolean) => void; 8}; 9 10const Loading = () => <div>Loading</div>; 11 12const Content = () => <div>Content</div>; 13 14export default compose( 15 withState('loading', 'setLoading', true), 16 withEffect<Props>(({setLoading}) => { 17 setTimeout(() => { 18 setLoading(false); 19 }, 2500); 20 }, []), 21 renderIf<Props>(({loading}) => loading, Loading), 22)(Content);
1import React from 'react'; 2import {compose, withEffect, withState} from '@truefit/bach'; 3import {renderIf} from '@truefit/bach-recompose'; 4 5const Loading = () => <div>Loading</div>; 6 7const Content = () => <div>Content</div>; 8 9export default compose( 10 withState('loading', 'setLoading', true), 11 withEffect(({setLoading}) => { 12 setTimeout(() => { 13 setLoading(false); 14 }, 2500); 15 }, []), 16 renderIf(({loading}) => loading, Loading), 17)(Content);
Underlying React Hooks
Short circuits the render chain and renders nothing.
Enhancer Signature
This enhancer has no parameters
Example
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {renderNothing} from '@truefit/bach-recompose'; 4 5const Content = () => <div>Something</div>; 6 7export default compose(renderNothing())(Content);
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {renderNothing} from '@truefit/bach-recompose'; 4 5const Content = () => <div>Something</div>; 6 7export 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
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {withProps} from '@truefit/bach-recompose'; 4 5type Props = { 6 title: string; 7 description: string; 8}; 9 10const WithProps = ({title, description}: Props) => ( 11 <div> 12 <h1>withProps</h1> 13 <h2>Title: {title}</h2> 14 <h2>Description: {description}</h2> 15 </div> 16); 17 18export default compose( 19 withProps<Props>({ 20 title: 'Hello', 21 description: () => 'World', 22 }), 23)(WithProps); 24
1import React from 'react'; 2import {compose} from '@truefit/bach'; 3import {withProps} from '@truefit/bach-recompose'; 4 5const WithProps = ({title, description}) => ( 6 <div> 7 <h1>withProps</h1> 8 <h2>Title: {title}</h2> 9 <h2>Description: {description}</h2> 10 </div> 11); 12 13export default compose( 14 withProps({ 15 title: 'Hello', 16 description: (props) => 'World' 17 }), 18)(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
1import React from 'react'; 2import {compose, withState, withCallback} from '@truefit/bach'; 3import {memo} from '@truefit/bach-recompose'; 4 5type MemoProps = { 6 count: number; 7}; 8 9const Memo = compose<MemoProps>( 10 memo<MemoProps>((prevProps, nextProps) => { 11 return nextProps.count % 2 === 0; 12 }), 13)(({count}: MemoProps) => ( 14 <> 15 <h1>Memo</h1> 16 <h2>{count}</h2> 17 </> 18)); 19 20type WrapperProps = { 21 count: number; 22 setCount: (n: number) => void; 23 24 increment: () => void; 25}; 26 27export default compose( 28 withState<WrapperProps, number>('count', 'setCount', 0), 29 withCallback<WrapperProps>('increment', ({count, setCount}) => () => { 30 setCount(count + 1); 31 }), 32)(({count, increment}: WrapperProps) => ( 33 <div> 34 <Memo count={count} /> 35 <button type="button" onClick={increment}> 36 Increment 37 </button> 38 </div> 39));
1import React from 'react'; 2import {compose, withState, withCallback} from '@truefit/bach'; 3import {memo} from '@truefit/bach-recompose'; 4 5const Memo = compose( 6 memo((prevProps, nextProps) => { 7 return nextProps.count % 2 === 0; 8 }), 9)(({count}) => ( 10 <> 11 <h1>Memo</h1> 12 <h2>{count}</h2> 13 </> 14)); 15 16export default compose( 17 withState('count', 'setCount', 0), 18 withCallback('increment', ({count, setCount}) => () => { 19 setCount(count + 1); 20 }), 21)(({count, increment}) => ( 22 <div> 23 <Memo count={count} /> 24 <button onClick={increment}>Increment</button> 25 </div> 26));
Underlying React HOC
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 2/25 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
11 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More