getLismProps()

Lismで用意しているコンポーネント以外でもLism Propsを活用できるように、getLismProps()も用意しています。

例えば、下記 ①、② はそれぞれ同じ出力になります。

// ① Lism コンポーネントを使う
<Box p='20' bgc='base-2' fz='xl'>text</Box>

// ② ただの div タグを使う
<div {...getLismProps({className:'l--box', p:'20', fz:'xl'})}>text</div>

getLismProps()は、引数に渡したオブジェクトを解析し、Lism Props として処理できるものをclassNameとstyleに変換して返します。

引数: Lism Props として解析したいプロパティをオブジェクトで指定します。
返り値: className, style を含むオブジェクトです。Lismで処理できないPropsがあった場合はそのまま返ってきます。

下記のようにして使用できます。

↓

例

import getLismProps from '@lism-ui/core/lib/getLismProps';

const returnProps = getLismProps({className:'foo', fz:'xl', p:['30', '40']});

↓

返り値

{
  className: 'foo -fz:l -p:30 -p@sm',
  style: {'--sm-p':'var(--s40)'},
}

注意点

getLismPropsをスプレッド構文で展開する際、classNameとstyleが含まれることに注意してください。
例えば、次のようにclassNameの指定を分離すると、classNameが上書きされてしまいます。

↓

<div className='foo' {...getLismProps({p:'20', fz:'xl'})}>text</div>