@bem-react/core ·  

Core package helps organize and manage components with BEM modifiers in React.

Install

``
npm i -S @bem-react/core
`

Usage

Let's say, you have an initial App file structure as follows:

`
App.tsx
Components/
Button/
Button.tsx
`

And you need to set up two optional types of buttons that will be different from the Button.tsx. _(In our example those will be Button of theme 'action' and Button of type 'link')_

You can handle those using _@bem-react/core_.

Follow the guide.

#### Step 1.

In your Components/Button/index.tsx, you define the type of props your button can get within the interface that extends IClassNameProps from '@bem-react/core' :

`ts
import { ReactType } from 'react'
import { IClassNameProps } from '@bem-react/core'
import { cn } from '@bem-react/classname'

export interface IButtonProps extends IClassNameProps {
as?: ReactType
}

export const cnButton = cn('Button')
`

#### Step 2.

Set up the basic Button variant which will be rendered if no modifiers props are set in the parent component.
Inside your Components/Button/Button.tsx:

`tsx
import React, { FC } from 'react'

import { IButtonProps, cnButton } from './index'

export const Button: FC = ({
children,
className,
as: Component = 'button',
...props
}) => (

{children}

)
`

#### Step 3.

Set up the optional withButtonTypeLink and optional withButtonThemeAction variants that will be rendered if {type: 'link'} and/or {theme: 'action'} modifiers are set in the parent component respectively.
Inside your Components/Button/ you add folders _type/ with Button_type_link.tsx file in it and _theme/ with Button_theme_action.tsx .

`
App.tsx
Components/
Button/
Button.tsx
index.tsx
+ _type/
+ Button_type_link.tsx
+ _theme/
+ Button_theme_action.tsx
`

Set up the variants:

Note! The second parameter in withBemMod() is the condition for this component to be applied.

1. In Components/Button/_type/Button_type_link.tsx

`tsx
import React from 'react'
import { withBemMod } from '@bem-react/core'

import { IButtonProps, cnButton } from '../index'

export interface IButtonTypeLinkProps {
type?: 'link'
href?: string
}

export const withButtonTypeLink = withBemMod(
cnButton(),
{ type: 'link' },
(Button) => (props) => ,
)
`

2. In Components/Button/_theme/Button_theme_action.tsx

`tsx
import { withBemMod } from '@bem-react/core'

import { cnButton } from '../index'

export interface IButtonThemeActionProps {
theme?: 'action'
}

export const withButtonThemeAction = withBemMod(cnButton(), {
theme: 'action',
})
`

#### Step 4.

Finally, in your App.tsx you need compose only necessary the variants with the basic Button.
Be careful with the import order - it directly affects your CSS rules.

> NOTE: If you wanna use same modifiers with different values you should use composeU for getting correctly typings.

`tsx
import React, { FC } from 'react';
import { compose, composeU } from '@bem-react/core';

import { Button as ButtonPresenter } from './Components/Button/Button';
import { withButtonTypeLink } from './Components/Button/_type/Button_type_link';
import { withButtonThemeAction } from './Components/Button/_theme/Button_theme_action';
import { withButtonThemeDefault } from './Components/Button/_theme/Button_theme_default';

import './App.css';

const Button = compose(
composeU(withButtonThemeAction, withButtonThemeDefault),
withButtonTypeLink,
)(ButtonPresenter);

export const App: FC = () => (





I'm basic
// Renders into HTML as: I'm Basic

I'm type link
// Renders into HTML as: I'm type link

I'm theme action
// Renders into HTML as: I'm theme action

I'm all together
// Renders into HTML as: I'm all together