New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

mui-blox

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mui-blox

This project provides a simple extension of the Material-UI `Box` component called `Flex`. It mimics the behavior of `flexbox-react` and exposes a similar API. All the props of `Box` are also available via Material-UI's built-in styling functions (which

  • 0.4.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

MUI-Blox

This project provides a simple extension of the Material-UI Box component called Flex. It mimics the behavior of flexbox-react and exposes a similar API. All the props of Box are also available via Material-UI's built-in styling functions (which is in turn insipired by styled-system).

This version includes a fix for a the min-height bug that interferes with the ability to create scrollable flex elements for Firefox.

Why

This library greatly simplifies layout styling in JSX. If you know how to use flexbox, you know how to use the Flex component.

There's no need for , ,

, , , or any other arbitrarily named specced components to frame out your app. The terse shorthand props used by Material-UIs styling functions help reduce clutter make it easier to keep styling visible right where it's needed, rather than obfuscated behind myriad layout components.

Install

yarn add mui-blox
# or
npm install --save mui-blox

Prerequisites

Material-UI v4 or greater.

Usage

import React from 'react'
import { Flex } from 'mui-blox
import { Button } from '@material-ui/core

const MyComponent = props => {
  return (
    <Flex justifyContent='space-between' p={1}>
      <Button onClick={() => doSomething()}>Button1</Button>
      <Button onClick={() => doSomethingElse()}>Button2</Button>
    </Flex>
  )
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details

FAQs

Package last updated on 29 Jan 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc