nachoaivarez / flexbox-react Goto Github PK
View Code? Open in Web Editor NEWUnopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
License: Other
Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
License: Other
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?
@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?
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
Setting set flexShrink={0}
doesn't set the css, I'm guessing it's evaluating to false
.
flexShrink="0"
I think works as intended but gives a warning the propType is not a number.style={{ flexShrink: 0 }}
but then I think we'll have to add browser-specific tags manuallyUsing withProps
from recompose though example code above in jsx.
Sometimes we need to set flexbox-shrink
to 0
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
Just wondering if/when you might support v16 of React? Thanks
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.
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'.
Thanks for this package.
How you would do animations when adding or removing flex items?
Thanks for the project!
Just a quick spelling correction in the project description (can't do a PR for this ๐ )
- propietary
+ proprietary
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'
]),
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>
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?
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>
);
}
}
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?
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;
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?
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.
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.
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.
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.
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.
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>
);
}
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.
It would be useful to support overflow
in order to create scrolling containers. I can send a PR if you'd like.
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.