Class Name

Create and format BEM class names for React components. The formatter uses simplified BEM syntax.

Installation

Via Yarn

yarn add @wavevision/class-name

or npm

npm install --save @wavevision/class-name

Usage

Simple React component

importReact,{useState,FunctionComponent}from'react';importclassName,{USE_VALUE}from'@wavevision/class-name';interfaceComponentProps{align: string;booleanProp: boolean;nullableProp: string|null;stringProp: string;}interfaceComponentState{visible: boolean;}// Define base class name with props and state behaving as modifiersconstcomponentClassName=className<ComponentProps,ComponentState>('component-class',()=>({// if booleanProp value is truthy, 'booleanProp' will be used as modifierbooleanProp: true,// if stringProp value is truthy then the value will be usedstringProp: USE_VALUE,// use callback for custom modifiers, string returned will be usedcustomModifier: ({ props })=>(props.nullableProp ? 'custom' : null),// if a non-string truthy value is returned, key will be usedanotherModifier: ({ state })=>state.visible,}),);// We can also have modifiers defined only if some condition is metconstanotherClassName=className<ComponentProps,ComponentState>('another-class',({ props, state })=>{if(props.nullableProp!==null){// the whole set of modifiers will be created only if nullableProp is not nullreturn{stringProps: USE_VALUE,customModifier: ()=>true};}if(state.visible){// this set will be created only if state.visible is truereturn{customModifier: ()=>true};}},);constComponent: FunctionComponent<ComponentProps>=props=>{const[visible]=useState<ComponentState['visible']>(false);constclassName=componentClassName({ props,state: { visible }});constnextClassName=anotherClassName({ props,state: { visible }});return(<divclassName={className.block('inline-modifier')}><divclassName={nextClassName.block()}/><divclassName={className.compose(className.element('child'),// extra class name with optional prefix (e.g. Bootstrap text utility)className.extra(props.align,'text'),)}/>// modifiers can be nullable and will be used only if not null<divclassName={className.element('element',props.nullableProp)}/><divclassName={className.element('another','element-modifier')}/></div>);};

will output following when rendered

<Componentalign="right"booleanProp={true}nullableProp={null}stringProp="something"/>

<divclass="component-class component-class--boolean-prop component-class--something component-class--inline-modifier"
><divclass="another-class"></div><divclass="component-class__child text-right"></div><divclass="component-class__element"></div><divclass="component-class__another component-class__another--element-modifier"
></div></div>