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.