react-flexbox-svg
v0.11.1
Published
Flexbox for SVG in React, using css-flexbox
Downloads
11
Readme
react-flexbox-svg
Flexbox for SVG in React, using css-layout.
css-layout is Facebook's JavaScript reimplementation of CSS which is now part of Yoga.
Based on react-flexbox-svg by David Manning.
Features
- Define item layout statically or compute it from props.
- Render layout rectangles for debugging (visible or not).
- Pass layout into child props if needed.
- No magic.
- ES7 decorator ready.
Usage
import React from 'react'
import { FlexContext, FlexContainer } from 'react-flexbox-svg'
class StackedItemCollection extends React.Component {
render() {
return (
<svg width="800" height="600">
<FlexContext>
<FlexContainer style={{ flexDirection: 'column' }}>
<Item key="1" />
<Item key="2" />
<Item key="3" />
</FlexContainer>
</FlexContext>
</svg>
)
}
}
class Item extends React.Component {
render() {
const { height } = Item.layout
return <rect height={height} width="100%" stroke="black" strokeWidth="3" />
}
}
Item.layout = { margin: 25, height: 50 }
export default layoutable(props => Item.layout)(Item)
As a functional component:
const Item = layoutable(props => ({ margin: 10, height: 50 }))(() => (
<rect height="50" width="100%" stroke="black" strokeWidth="3" />
))
Using ES7 decorators:
@layoutable(props => Item.layout)
class Item extends React.Component {
render() {
const { height } = Item.layout
return <rect height={height} width="100%" stroke="black" strokeWidth="3" />
}
}
Item.layout = { margin: 10, height: 100 }
In the examples folder is a more interesting example featuring a dynamic collection.
Installation
npm install --save babel-runtime react-flexbox-svg
Contribute
- Issue Tracker: https://github.com/metabolize/react-flexbox-svg/issues
- Source Code: https://github.com/metabolize/react-flexbox-svg/
Pull requests welcome!
Support
If you are having issues, please let me know.
License
This projects is licensed under the ISC license.