Function mapProps

Lifts a function that maps the prop type B into the prop type A, into a function the maps a component of type FC<A> into a component of type FC<B>.

This is the opposite of how map works. For example, Array.map lifts:

(A ⇒ B) -into→ (Array<A> ⇒ Array<B>)
Copy

While mapProps, calledmapInput in effect, and contramap in @effect/typeclass, (“contra” means “counter to” in greek), is of type:

(B ⇒ A) -into→ (FC<A> ⇒ FC<B>)
Copy

Useful when:

1. You have a component that takes props of type A.
2. But you want a component that takes props of type B.
3. And the props you have are of type B.
4. But you do have some way of converting B ⇒ A.

For example:

import {mapProps} from 'react-compinators'
interface B { foo: string }
interface A { bar: number }

const ComponentA: FC<A> = ({ bar }) => <div>{bar + 1}</div>;

// The function mapping B ⇒ A
const mapper = (a: B): A => ({ bar: a.foo.length })

// We now have a component of B
const ComponentB: FC<B> = pipe(ComponentA, mapProps(mapper));
Copy