I'm curious if the key prop was left out for a reason? If you're nesting flexboxes and your parent element is a flexbox it seems like a key would be necessary.

Problem

Setting set flexShrink={0} doesn't set the css, I'm guessing it's evaluating to false.

Workarounds

• Change to flexShrink="0" I think works as intended but gives a warning the propType is not a number.
• Set style={{ flexShrink: 0 }} but then I think we'll have to add browser-specific tags manually

Context

Using withProps from recompose though example code above in jsx.

Sometimes we need to set flexbox-shrink to 0

CSS shorthand properties like margin or flex are being overridden by their related properties, which are undefined as a result of the destructuring of props. Therefore, shorthand properties are not included in the final style property.

<Flexbox margin="10px">
    ...
</Flexbox>

incorrectly renders to:

<div style="display: flex;">
    ...
</div>

Hi,
Seems I found small issue. I can't use

<Flexbox ref={(instance) => { debugger; this.flexboxInstance= instance; }} />

When call this set null to flexboxInstance. And probably this component required to implement getPublicInstance() method properly.

ERROR in ./node_modules/flexbox-react/dist/Flexbox.js
Module not found: Error: Can't resolve 'react' in '/Users/walkersmith/Repositories/workspace/node_modules/flexbox-react/dist'
 @ ./node_modules/flexbox-react/dist/Flexbox.js 13:13-29
 @ ./node_modules/flexbox-react/dist/index.js
 @ ./component-library/src/index.js

ERROR in ./node_modules/styled-components/dist/styled-components.es.js
Module not found: Error: Can't resolve 'react' in '/Users/walkersmith/Repositories/workspace/node_modules/styled-components/dist'
 @ ./node_modules/styled-components/dist/styled-components.es.js 3:0-56
 @ ./node_modules/flexbox-react/dist/Flexbox.js
 @ ./node_modules/flexbox-react/dist/index.js
 @ ./component-library/src/index.js

I get the following error when building with webpack. My webpack config contains

...
 loaders: [
            {
                test: /\.jsx?/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
...

I have react in my package.json under dependencies and see it in my node_modules directory.
Any ideas of what to look out for?

It would be useful to support overflow in order to create scrolling containers. I can send a PR if you'd like.

Currently, if I do something like:

<Flexbox>
    <Flexbox flexGrow={1} />
    <Flexbox flex="0 0 45%" />
</Flexbox>

The children Flexbox elements will have display: flex even though I want them to be flex children rather than containers. This isn't a problem for regular javascript, because the propTypes aren't actually enforced, so you could just do <Flexbox display="block" /> for the child element (though even that seems really cumbersome). However, for typescript, the types are actually enforced by the compiler, and display is restricted to flex and inline-flex, so you wouldn't be able to hack around it as I showed above without a compiler error.

An unideal solution would be to not use Flexbox for children, but rather just plain elements, and then to define the flex properties for them elsewhere. However, I'd really rather just be able to use the same API as the container.

Today I updated to 4.3.0 and suddenly I noticed that children component inside the flexbox were being completely recreated (instead of updated) upon new renders.

When I went back to 4.2.1 the issue was fixed.

PS: not sure if it helps, but the root of the cause seems to be re-creations of styled.div children I think.

Please can you add className so we can add extra css to the Flexbox element

many thanks

Thanks for this package.
How you would do animations when adding or removing flex items?

I was successfully using 4.2.1 in a create-react-app based app. I just upgraded it to use 4.3.0, this brought in a number of upgraded dependencies.

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

We are using redux and every time a redux action gets sent it looks like the complete dom is reloaded, and in this case changed, by the addition of an ever increasing number of empty <style type="text/css"></style> blocks being loaded in my block, then the app becomes completely unresponsive and I have to kill it.

I'll keep digging.

Thank you for good product.
I found TypeScript bug when use render props

This is OK

import * as React from "react"
// import Flexbox from "flexbox-react"

// mock
const Flexbox = ({ children }) => <div>{children}</div>
class RenderPropsExample extends React.Component<{
  children: (props: any) => React.ReactNode
}> {
  render() {
    return this.props.children({ value: "hello" })
  }
}

const App = () => {
  return (
    <Flexbox>
      <RenderPropsExample>{(value) => <div>(value)</div>}</RenderPropsExample>
    </Flexbox>
  )
}

and when I import Flexbox

import * as React from "react"
import Flexbox from "flexbox-react"

class RenderPropsExample extends React.Component<{
  children: (props: any) => React.ReactNode
}> {
  render() {
    return this.props.children({ value: "hello" })
  }
}

const App = () => {
  return (
    <Flexbox>
      <RenderPropsExample>{(value) => <div>(value)</div>}</RenderPropsExample>
    </Flexbox>
  )
}

Got error.

[ts]
JSX element type 'RenderPropsExample' is not a constructor function for JSX elements.
  Types of property 'render' are incompatible.
    Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element; }'.
      Type 'ReactNode' is not assignable to type 'false | Element'.
        Type 'string' is not assignable to type 'false | Element'.

Hi all, thanks for the great project!

nitpick: Suggesting to add 'space-evenly' as acceptable value for justifyContent prop:

 justifyContent: PropTypes.oneOf([
    'center',
    'flex-end',
    'flex-start',
    'space-around',
    'space-between'
  ]),

Thanks for the awesome library. I was trying to blend inline flexbox css declarations into my components and found your library to be a lot more intuitive and easy-to-read than other flexbox libraries out there that try to use Boostrappy namespaces (grid, rows, columns etc..).

I have one feature request. I am wondering if you can add media queries as potential prop inputs(by adding them into list of required PropTypes?) I am trying to make my flexbox layout respond to different screen size. I am experimenting with Radium where you can add custom media query declarations injected into inline style props.

I am thinking of potential use cases like this:
If the screen size is mobile, flex direction changes from column to row so layout does column-dropping.

const medaQueries = {
  "@media (max-Width: 960px)": {
    "flexDirection": "column"
    // other CSS
  },
  // other break points//
}

<Flexbox style={mediaQueries} flexDirection="row" flexWrap="wrap" minHeight="100%" width="100%">
 // Flex items
</Flexbox>

Any other good solutions can you think of other than this? Let me know. Thanks

Hi,
This is a very useful component and comes with Typescript definition included. But I think it'll be hard for users if you include @types/react & @types/react-dom as this package dependencies.

Mostly users will have those dependencies included already in their project and so will create duplicate Typescript definitions if their versions are different than what's required in this package, causing compile errors.

Same as with react, it'll be safer to include them as peerDependencies. That way, if a user install this package without already having them, they will see a warning. Or, don't include them at all so non-typescript user won't have to forcibly include them if they don't need it.

What do you think?

Sometimes I'm forced to define layout properties using actual CSS because I'm using semantic markup, like <header> or <section>, and I feel that breaks with flexbox-react philosophy. I would like to have all the layout defined only by <Flexbox /> components but without loosing the semantics.

I suggest adding an optional element property to the <Flexbox /> API, which defaults to 'div'. Then, I would be able to do something like this:

<Flexbox element="header" height="80px">
    ...
</Flexbox>

which would render to:

<header style="display: flex; height: 80px;">
    ...
</header>

It's not currently possible to pass properties like flex or alignSelf to a <Flexbox /> component that is an immediate child of another <Flexbox />. The <Flexbox /> component API should allow those props... As a result, <FlexItem /> is no longer necessary.

Thanks for the project!

Just a quick spelling correction in the project description (can't do a PR for this 🙁 )

- propietary
+ proprietary

Hey,

This is pretty cool, but I did not find a way to have a flexbox inside a flexitem take 100% of its height :

      <Flexbox flexDirection='column' height='100%'>
        <FlexItem flexGrow={ 1 }>
          <Flexbox flexDirection='column' minHeight='100%'>
            Hey
          </Flexbox>
        </FlexItem>
        <FlexItem>
          Hoy
        </FlexItem>
      </Flexbox>

There is no way to make the nested Flexbox fill its parent.

Another thought: I see we can pass a "className" prop, but it would be really nice to be able to pass any arbitrary props (like "style") :
https://github.com/nachoaIvarez/flexbox-react/blob/master/src/FlexItem.jsx#L27

A better way would be to split props between those regarding flex and other props and apply all other props to the div so that we can have control over them :

  render() {
    const { alignSelf, flex, flexBasis, ...props } = this.props // skipping most props here for brievety

    return (
      <div style={this.styles()} { ...props }>
        {this.props.children}
      </div>
    );
  }

So I'm getting an unexpected token error when utilising list-style:

<Flexbox margin="0" padding="0" style={{ list-style: 'none' border: '1px solid black' }}>

What's the issue here?

See attached image for full error breakdown.

When I compile a project depending on the latest version of flexbox-react (4.4.0), the compile fails with a lot of error messages like this:

h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
                 ~~

node_modules/flexbox-react/node_modules/@types/react/index.d.ts(3452,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'h1'
must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingEleme
nt>, HTMLHeadingElement>'.

I'm using Typescript 2.4.2.

The react I have in my own application is 16.0.2, although I don't think that should be relevant.

I'm still relatively new to Typescript and npm, so it may be not a problem with flexbox-react but something I do wrong.

Hey @nachoaIvarez

Was having some issues with flexShrink={0} props not appearing, but it seems it should be handled by the isTruthyOrZero() helper method. Looked at the installed build and that function is not there.

This is the code in the compiled lib

...
props.flexShrink ? 'flex-shrink: ' + props.flexShrink + ';' : '';
...

Do you think you can publish a fresh build to npm?

expected one of ["article","aside","div","figure","footer","header","main","nav","section"].

Maybe it would make sense to add all valid html tags to the proptypes?

From the README:

You should not learn any proprietary syntax, classnames or API's for this. If you know how to use flexbox, you know how to use flexbox-react components.

So wouldn't you consider changing the API to receive the display prop instead of the inline prop? display would default to 'flex' and could also be set to 'inline-flex' if desired.

Hey @nachoaIvarez

Thanks for building this lib, works great, most of the time. However, in my SSR app the server rendered output does not validate so the layout is broken for a split second before the client JS kicks in.

Using Chrome 56. As you can see, the browser complains about Invalid property value. Seems to be a problem with how the prefix is generated for the display property. For the display prop, the rules should probably be rendered as individual rows like so:

display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Just wondering if/when you might support v16 of React? Thanks

Here is an example of a component that will break the input's onChange:

class NewSlideButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: ''
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange({ target: { value } }) {
    this.setState({ title: value });
  }

  handleClick() {
    this.props.actions.createNewSlide(this.state.title);
  }

  render() {
    return (
      <Flexbox
        key="input"
        className="add-new-slide"
        marginBottom="10px"
        height="40px"
        flexDirection="row"
      >
        <input
          type="text"
          className="add-new-slide__title-input"
          value={this.state.title}
          placeholder="Enter slide title"
          onChange={this.handleChange}
        />
        <Flexbox
          alignItems="center"
          justifyContent="center"
          className="add-new-slide__button"
          onClick={this.handleClick}
        >Add slide</Flexbox>
      </Flexbox>
    );
  }
}

@nachoaIvarez So,I'm wishing to wrap a menu list once the screen pixel width reaches a predetermined size, and have applied the following logic, without success. No errors/warnings are being generated. What am I overlooking?:

<Flexbox element="nav"
minWidth="100vw"
margin="0"
padding="0"
style={{ '@media all and (maxWidth: 1000px)': {flexWrap: 'wrap'} }}>

<navigation menu />

</Flexbox>

Many thanks in advance.

P.S. Is this project on Gitter, which would be a more apt place to submit general queries?