whoisandy / react-blocks Goto Github PK
View Code? Open in Web Editor NEWA higher-level react component to manage complex layouts using flexbox.
Home Page: http://whoisandy.github.io/react-blocks
License: MIT License
A higher-level react component to manage complex layouts using flexbox.
Home Page: http://whoisandy.github.io/react-blocks
License: MIT License
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
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?
This looks useful, nice job
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.
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",
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 ! ๐
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.
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.