@muzikanto/bem-react v1.0.2

Bem switch components

import {withBemMod, compose, IClassNameProps} from '@muzikanto/bem-react'

const ButtonSpan = ({className, children}: {className?: string, children?: React.ReactNode}) => (
    <span className={className}>{children}</span>
);
const ButtonLink = ({href, className}: { href: string, className?: string }) => (
    <a href={href} className={className}>text</a>
);
const ButtonBase = ({disabled, className}: { disabled: boolean, className?: string }) => (
    <button className={className} disabled={disabled}>text</button>
);

class ButtonClass extends React.Component<IClassNameProps>{
    render(){
        return (
            <button>ButtonClass</button>
        )
    }
}

const Button = compose(
    withBemMod('link', ButtonLink),
    withBemMod('span', ButtonSpan),
    withBemMod('class', (props)=> <ButtonClass {...props}/>)
)(ButtonBase, 'Button');

/*
Input as (props: {disabled: boolean, className?: string} |
            {href: string, mod: 'link', className?: string} | 
            {mod: 'class', className?: string} | 
            {children: React.ReactNode, mod: 'span', className?: string})  => JSX.Element
 */

const render = () => (
    <Button mod={'span'}>text</Button> 
    // <span class="Button Button_mod_span">text</span>
    <Button mod={'class'}>text</Button> 
    // <button class="Button Button_mod_class">ButtonClass</button>
    <Button mod={'link'} href={'/url'}/> 
    // <a href={'/url'} class="Button Button_mod_link"></a> 
    <Button disabled={true}/> 
    // <button class="Button"></span>
)