https://github.com/awinogradov/condicom

Apply React component enhancements by condition
https://github.com/awinogradov/condicom

component enhancement functional-programming hoc react

Last synced: about 1 month ago
JSON representation

Apply React component enhancements by condition

• Host: GitHub
• URL: https://github.com/awinogradov/condicom
• Owner: awinogradov
• License: mit
• Created: 2018-10-12T16:39:58.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-12T21:54:15.000Z (about 6 years ago)
• Last Synced: 2024-10-23T21:06:27.267Z (3 months ago)
• Topics: component, enhancement, functional-programming, hoc, react
• Language: TypeScript
• Homepage:
• Size: 14.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Conditional React Component [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/condicom.svg)](https://bundlephobia.com/result?p=condicom)

Tiny helper which allows you to apply component enhancements by condition.

## Install

> npm i -S condicom

## Usage

Simple CSS only enhancement. For ex. you have component `Link` with some basic styles. 

`Link.tsx`

``` tsx

import * as React from 'react';

import './Link.css'; // file with default theme

export interface ILinkProps {

    url: string;

    text: React.ReactNode;

    theme?: 'default' | 'colorful';

}

export const Link: React.SFC = props => (

    {props.text}

);

Link.defaultProps = {

    theme: 'default';

};

```

But, also, you have theme for this component. Of couse you don't want to have all of this CSS on the every page.

`Link_theme_coloful.tsx`

``` tsx

import { withCondition, matchProps } from 'condicom';

import { ILinkProps } from './Link';

import './Link_theme_colorful.css'; // file with extra theme

export const LinkThemeColorful = withCondition(matchProps({ theme: 'colorful' }));

```

Then in Project 1.

`index.tsx`

``` tsx

import * as React from 'react';

import { Link } from 'my-conditional-components/Link';

const Form = () => (

    


        Default

    

);

```


And in Project 2.

`index.tsx`

``` tsx

import * as React from 'react';

import { Link } from 'my-conditional-components/Link';

import { LinkThemeColorful } from 'my-conditional-components/Link_theme_colorful';

import { compose } from 'really-typed-compose';

const EnhacedLink = compose(LinkThemeColorful)(Link);

// IT'LL BE APPLIED ONLY WITH MATCHED PROPS

const Form = () => (

    


        Colorful

        Default

    

);

```


## NOT FOR CSS ONLY

You can make any compositions by conditions.

`Link_pseudo.tsx`

``` tsx

import * as React from 'react';

import { withCondition, matchProps } from 'condicom';

import { ILinkProps } from './Link';

import './Link_pseudo.css';

export const LinkThemeColorful = withCondition(

    matchProps({ pseudo: true }), 

    (Link, props) => (

        


            

                {props.text}

            

        

    )

);

```


In Project 3.

`index.tsx`

``` tsx

import * as React from 'react';

import { Link } from 'my-conditional-components/Link';

import { LinkThemeColorful } from 'my-conditional-components/Link_theme_colorful';

import { LinkPseudo } from 'my-conditional-components/Link_pseudo';

import { compose } from 'really-typed-compose';

const EnhacedLink = compose(LinkThemeColorful, LinkPseudo)(Link);

// IT'LL APPLY ALL ENHANCEMENTS

const Form = () => (

    


        

            ColorfulWrappedWithInner

        

    

);

```


### License [MIT](LICENSE)