mui-sx
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

mui-sx

A simple utility for conditionally joining material ui sx props together.

ts PRs Welcome License

Features

  • Cleaner conditional sx composition syntax inspired from classnames
  • Extremely tiny 0.36kb (gzipped) 0.6kb (minified) 🎉
  • Type-definitions

Demo

Codesandbox: https://codesandbox.io/s/sx-compose-example-z0mki

Installation

Install mui-sx using your package manager

npm install mui-sx --save 

OR

yarn add mui-sx

Import

import sx from 'mui-sx';

Usage

Basic Sx

const sxDisplayFlex = { display: 'flex' }
const sxDisplayTable = { display: 'table' }
const sxBordered = { border: '1px solid' }

sx(sxDisplayFlex)                                                         // => { display: 'flex' }
sx(sxDisplayFlex, sxBordered)                                             // => { display: 'flex', border: '1px solid' }
sx(sxDisplayTable, sxBordered)                                            // => { display: 'flex', border: '1px solid' }

Conditional Sx

sx({ condition: false, sx: sxDisplayFlex })                              // => {}
sx({ condition: true, sx: sxDisplayFlex })                               // => { display: 'flex' }

Mixed

sx(sxBordered, { condition: false, sx: sxDisplayFlex })                 // => { border: '1px solid' }
sx(sxBordered, { condition: true, sx: sxDisplayFlex })                  // => {  border: '1px solid', display: 'flex' }
sx(sxBordered, sxDisplayFlex, { condition: true, sx: sxDisplayTable })  // => {  border: '1px solid', display: 'table' }

LICENSE MIT

Copyright (c) 2021 Rohan Salunke. Copyright of the Typescript bindings are respective of each contributor listed in the definition file.

Package Sidebar

Install

npm i mui-sx

Weekly Downloads

786

Version

1.0.0

License

MIT

Unpacked Size

5.25 kB

Total Files

5

Last publish

Collaborators

  • okrohan