react-flexbox-svg

0.11.1 • Public • Published

react-flexbox-svg

version license build code style

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

Pull requests welcome!

Support

If you are having issues, please let me know.

License

This projects is licensed under the ISC license.

Package Sidebar

Install

npm i react-flexbox-svg

Weekly Downloads

1

Version

0.11.1

License

ISC

Unpacked Size

18.4 kB

Total Files

9

Last publish

Collaborators

  • dlmanning
  • paulmelnikow