whoisandy / react-blocks Goto Github PK

This looks useful, nice job

being able to configure the tagName of the rendered dom element would prove useful for list elements, etc.

<Block tagName='ul'>
  <Block tagName='li' />
</Block>

Given the following:

import React from 'react';
import Block from 'react-blocks';

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'hello (initial)' };
  }

  render() {
    return (
      <div>
        <a href="#" onClick={() => this.setState({ message: 'hello (modified)'})}>click me</a><br />
        state outside Block: {this.state.message}
        <Block layout horizontal>
          <Block>state inside Block: {this.state.message}</Block>
        </Block>
      </div>
    );
  }
}

The initial output is:

state outside Block: hello (initial)
state inside Block: hello (initial)

And after I click the "click me" link:

state outside Block: hello (modified)
state inside Block: hello (initial)

Looks like a bug. If not, then how can I force the contents of Block to re-render when state changes?

I get the following error:

Warning: Unknown props `layout`, `horizontal`, `justifyBetween` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

With the following code:

import React from 'react'
import {render} from 'react-dom'
import Block from 'react-blocks';

render(
    <Block layout horizontal justifyBetween>
        Test
    </Block>,
    document.getElementById('app')
);

Using these versions:

npm list react react-dom react-blocks
+-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]

Probably a bug?

Hi I have a problem , the attribute no longer works.
here is my code

      <Block flex layout  horizontal  alignCenter id="avatar">

here is the render

element.style {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
box-sizing: border-box;
flex-wrap: wrap;
display: flex;
flex-direction: row;
align-items: stretch;
}
it automatically wrap and align-items is stretch
Sorry for my english can you help me please

warning.js:36 Warning: ComposedBlock: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

not support restProps

const {  a,  b, ...restProps } = this.props;

I can not set attr key

render () {
     const data = ['a', 'b', 'c'];
     return (
         <Block layout>
             {
                  data.map((idata, index) => {
                      return (<Block key={`block-${index}`}></Block>);
                  })
             }
         </Block>
     );
}

versions:

    "prop-types": "^15.5.8",
    "react": "^15.4.1",
    "react-addons-update": "^15.4.0",
    "react-blocks": "^1.1.4",
    "react-dom": "^15.4.1",
    "react-router": "^2.4.0",

In common use cases I can think of, nowrap would make more sense for page layouts. Flexbox'es strength as I see it is in easily making blocks layout in a row or a column that stretches over its container's width/height with one item filling the available space (or some variation of that), but flex-wrap:wrap makes the view unpredictable since it makes the layout dependent on width/height of the blocks internal content.

Hello,
I've tried the library with React v0.14, and I have these errors :

Warning: Block(...): React component classes must extend React.Component
Uncaught Error: Invariant Violation: Block.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Is an update planned ?

Thanks for the great lib ! 👍

The current version of react-blocks includes handling media queries. The question is, whether it should be at the core of the library? Also there are a couple of notable libraries out there that handle media queries specifically. Again CSS media queries could be another use case. If the feature helps you, please lemme know.