Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-comp-type

0.1.2 • Public • Published

react-comp-type

Comp type for functional components composition in ReactJs.

Small demo app here in this sandbox.

npm install react-comp-type

Implementations

Monoid

  • Concatenation
Comp1.concat(Comp2.concat(Comp3)) == Comp1.concat(Comp2).concat(Comp3) 
 
// or equivalently
Comp1.concat(Comp2.concat(Comp3)) == Comp1.concat(Comp2, Comp3);
  • Neutral element
Comp.empty().concat(Comp1) == Comp1;

Contravariant

  • Identity:
Comp1.contramap(props => props) == Comp1;
  • Composition:
Comp1.contramap(f).contramap(g) == Comp1.contramap(props => f(g(props)));

Functor

Since it's intended to be used with React we can re-define the Functor::map operation in order to get idiomatic React while passing components references to other components and also to maintain meaningful devTools access

  • Identity:
Comp1.map(({ children, ...props }) => children) == Comp1;
  • Composition:
Comp1.map(ComponentA).map(ComponentB) == Comp1.map(function ComponentC({ children, ...props }) {
  return ComponentB({
    ...props,
    children: ComponentA({
      ...props,
      children
    })
  });
}
 
// Alternatively in JSX format:
 
Comp1.map(ComponentA).map(ComponentB) == Comp1.map(function ComponentC({ children, ...props }) {
  return (
    <ComponentB {...props}>
      <ComponentA {...props}>
        {children}
      </Component>
    </ComponentB>
  )
});
 
// In this form it's easier to notice that mapping is a form of "transclusion" used in Angular apps

Profunctor

Using the Functor implementation from above and the Contravariant, we can define Profunctor

  • Promap
import React from 'react';
import Comp from 'react-comp-type';
 
const SomeComponent = ({ quantity }) => (
  <div className='SomeComponent'>
    Quantity: <b>{quantity}</b>
  </div>
);
 
const toComp1Props = props => ({ quantity: props.value });
 
const MyComponent = ({ children: someComponent, ...props }) => (
  <section className='MyComponent'>
    <h2>
      Now we can use the component instance below while the original props are still available
    </h2>
    {someComponent}
  </section>
);
 
Comp(SomeComponent).contramap(toComp1Props).map(MyComponent)
  == Comp(SomeComponent).promap(toComp1Props, MyComponent);

Install

npm i react-comp-type

DownloadsWeekly Downloads

2

Version

0.1.2

License

MIT

Unpacked Size

8.47 kB

Total Files

7

Last publish

Collaborators

  • avatar