Polishedの便利なhelper5選
こんにちは、スペースマーケットでエンジニアをしている8zkです。
みなさん、polished使ってますか?
私は使っていません。
というと終わってしまいそうですね。
ただ、個人開発で使ってみてとても便利だと思ったcssのhelperがいくつかあったので紹介したいと思います。
ちなみにpolishedは簡単に説明すると JavaScript でスタイルを記述するための軽量ツールセット
とのことです。
GitHub: https://github.com/styled-components/polished
Docs: https://polished.js.org/
導入方法
npm install --save polished
以上です。簡単ですね。
便利なhelper5選
cover
coverはmodalの下に敷くoverrayなどで使えるutility helperです。
const div = styled.div`
${cover()}
`
// CSS as JS Output
div: {
'position': 'absolute',
'top': '0',
'right': '0',
'bottom': '0',
'left': '0'
}
ellipsis
ellipsisは文章が伸びたときに3点リーダーを表示するためのutility helperです。
const div = styled.div`
${ellipsis('250px')}
`
// CSS as JS Output
div: {
'display': 'inline-block',
'maxWidth': '250px',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'whiteSpace': 'nowrap',
'wordWrap': 'normal'
}
hideText
hideTextはSEOのためのbackground imageに文字をユーザーに表示させずに認識させるutility helperです。
const div = styled.div`
backgroundImage: url(logo.png);
${hideText()};
`
// CSS as JS Output
'div': {
'backgroundImage': 'url(logo.png)',
'textIndent': '101%',
'overflow': 'hidden',
'whiteSpace': 'nowrap',
}
wordWrap
wordWrapはローマ字の文章の折り返しを制御するutility helperです。
const div = styled.div`
${wordWrap('break-word')}
`
// CSS as JS Output
const styles = {
overflowWrap: 'break-word',
wordWrap: 'break-word',
wordBreak: 'break-all',
}
- easeIn, easeInOut, easeOut
これらはcssのアニメーションをショートハンドでかけるutility helperです。
const easeIn = styled.div`
transitionTimingFunction: ${easeIn('quad')};
`
const easeInOut = styled.div`
transitionTimingFunction: ${easeInOut('quad')};
`
const easeOut = styled.div`
transitionTimingFunction: ${easeOut('quad')};
`
// CSS as JS Output
'easeIn': {
'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
}
'easeInOut': {
'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
}
'easeOut': {
'transitionTimingFunction': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
}
まとめ
以上が私が個人的に便利だなと思ったpolishedのutility helper5選です。
cssは記述が長くなりがちで、「あのスタイルを書きたいけどどうやって書くんだっけ...」となることが多いのでpolishedを使ってストレスフルにCSSを書けると嬉しいですね。
この他にもCOLORやMATH、HELPERS、SHORTHANDSなどたくさんの種類があるので自分だけのお気に入りを見つけてみるのも楽しそうです!
最後に
スペースマーケットでは一緒に働く仲間を募集しています!
少しでも興味を持ってくださったら、ぜひご連絡ください!
スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。 弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket
Discussion