npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@react-css/flex

v2.3.0

Published

A thin wrapper to help make CSS Flexbox simpler and more expressive

Downloads

909

Readme

@react-css/flex

A thin wrapper to help make CSS Flexbox simpler and more expressive

Build and Test Coverage Status react-css-test Known Vulnerabilities GitHub package.json version npm NPM

Getting Started

Installation:

yarn add @react-css/flex

npm install @react-css/flex

Importing:

import Flex from '@react-css/flex'

Usage

All components are <div />s with the React props fully exposed. You can change what is rendered for both <Flex /> and <Flex.Item /> via the as prop:

<Flex as='main'>
  <MyComponent />
</Flex>

Flex

To get a basic Flexbox:

<Flex>
  <MyComponent />
</Flex>

Inline

For an inline Flexbox:

<Flex inline>
  <MyComponent />
</Flex>

Flex Direction

To modify flex-direction (with React.CSSProperties types):

<Flex flexDirection='row'>
  <MyComponent />
</Flex>

To simplify, you can use:

<Flex row></Flex> // flex-direction: row;
<Flex rowReverse></Flex> // flex-direction: row-reverse;
<Flex column></Flex> // flex-direction: column;
<Flex columnReverse></Flex> // flex-direction: column-reverse;

These are first come first served, in this order. They cannot be used if you have already provided the flexDirection prop. Providing multiple will result in a console warning.

Flex Wrap

To modify flex-wrap (with React.CSSProperties types):

<Flex flexWrap='nowrap'>
  <MyComponent />
</Flex>

To simplify, you can use:

<Flex wrap></Flex> // flex-wrap: wrap;
<Flex noWrap></Flex> // flex-wrap: nowrap;
<Flex wrapReverse></Flex> // flex-wrap: wrap-reverse;

These are first come first served, in this order. They cannot be used if you have already provided the flexWrap prop. Providing multiple will result in a console warning.

Justify Content

To modify justify-content (with React.CSSProperties types):

<Flex justifyContent='center'>
  <MyComponent />
</Flex>

To simplify, you can use:

<Flex justifyStart></Flex> // justify-content: flex-start;
<Flex justifyEnd></Flex> // justify-content: flex-end;
<Flex justifyCenter></Flex> // justify-content: center;
<Flex justifySpaceBetween></Flex> // justify-content: space-between;
<Flex justifySpaceAround></Flex> // justify-content: space-around;

These are first come first served, in this order. They cannot be used if you have already provided the justifyContent prop. Providing multiple will result in a console warning.

Align Items

To modify align-items (with React.CSSProperties types):

<Flex alignItems='baseline'>
  <MyComponent />
</Flex>

To simplify, you can use:

<Flex alignItemsStart></Flex> // align-items: flex-start;
<Flex alignItemsEnd></Flex> // align-items: flex-end;
<Flex alignItemsCenter></Flex> // align-items: center;
<Flex alignItemsBaseline></Flex> // align-items: baseline;
<Flex alignItemsStretch></Flex> // align-items: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the alignItems prop. Providing multiple will result in a console warning.

Align Content

To modify align-content (with React.CSSProperties types):

<Flex alignContent='flex-end'>
  <MyComponent />
</Flex>

To simplify, you can use:

<Flex alignContentStart></Flex> // align-content: flex-start;
<Flex alignContentEnd></Flex> // align-content: flex-end;
<Flex alignContentCenter></Flex> // align-content: center;
<Flex alignContentSpaceBetween></Flex> // align-content: space-between;
<Flex alignContentSpaceAround></Flex> // align-content: space-around;
<Flex alignContentStretch></Flex> // align-content: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the alignContent prop. Providing multiple will result in a console warning.

Flex Flow (Shorthand)

To modify flex-flow (with React.CSSProperties types):

<Flex flow='row nowrap'>
  <MyComponent />
</Flex>

The React TypeScript definitions (or underlying csstype package) unfortunately adds very little type support for this value.

Flex Items

To help with structuring your components, a Flex Item is also available.

<Flex column alignItemsCenter>
  <Flex.Item>
    <MyFirstComponent />
  </Flex.Item>
  <Flex.Item>
    <MySecondComponent />
  </Flex.Item>
</Flex>

Order

To modify order (with React.CSSProperties types):

<Flex>
  <Flex.Item order={2}>
    <MyComponent />
</Flex>

Flex Grow

To modify flex-grow (with React.CSSProperties types):

<Flex>
  <Flex.Item grow={5}>
    <MyComponent />
  </Flex.Item>
</Flex>

Flex Shrink

To modify flex-shrink (with React.CSSProperties types):

<Flex>
  <Flex.Item shrink={3}>
    <MyComponent />
  </Flex.Item>
</Flex>

Flex Basis

To modify flex-basis (with React.CSSProperties types):

<Flex>
  <Flex.Item basis='4em'>
    <MyComponent />
  </Flex.Item>
</Flex>

Flex (Shorthand)

To modify flex (with React.CSSProperties types):

<Flex>
  <Flex.Item flex='1 0'>
    <MyComponent />
  </Flex.Item>
</Flex>

Align Self

To modify align-self (with React.CSSProperties types):

<Flex>
  <Flex.Item alignSelf='flex-end'>
    <MyComponent />
  </Flex.Item>
</Flex>

To simplify, you can use:

<Flex.Item alignSelfAuto></Flex.Item> // align-self: auto;
<Flex.Item alignSelfStart></Flex.Item> // align-self: flex-start;
<Flex.Item alignSelfEnd></Flex.Item> // align-self: flex-end;
<Flex.Item alignSelfCenter></Flex.Item> // align-self: center;
<Flex.Item alignSelfBaseline></Flex.Item> // align-self: baseline;
<Flex.Item alignSelfStretch></Flex.Item> // align-self: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the alignSelf prop. Providing multiple will result in a console warning.

Notes

Exposed Props

All the React div props and TypeScript definitions are exposed/passed through. This allows for an identical development experience whilst being able to ignore any Flexbox related CSS.

<Flex column onMouseEnter={onMouseEnter}>
  <Flex.Item grow={2}>
    <MyComponent />
  </Flex.Item>
  <Flex.Item alignSelfCenter onClick={handleItemClick}>
    <MyComponent />
  </Flex.Item>
</Flex>

Style Override

CSS provided via styles will be applied last, this allows all generated CSS to be overridden.

<Flex
  inline // this will get overridden
  style={{
    display: 'flex', // this will override everything else
  }}>
  <Flex.Item>
    <MyComponent />
  </Flex.Item>
</Flex>

Rendering as different elements

If the as prop is not provided, it will default to a <div />. The supported as values are:

  • div
  • nav
  • main
  • aside
  • article
  • header
  • section
  • footer

Limitations

Whilst the type definitions prevent you from using both the short and manual prop for each style, it is not feasible to expand this to stop you from being able to provide more than one of the short props for each style. These were implemented but due to the possible number of combinations (over 5000), TypeScript would not transpile it and the developer experience was poor as VS Code tried to work out the Props via IntelliSense.

To help prevent accidentally doing this, a warning will log if you have provided multiple values that would overlap/contradict.