Have ideas to improve npm?Join in the discussion! »

    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.

    Install

    npm i react-flexbox-svg

    DownloadsWeekly Downloads

    6

    Version

    0.11.1

    License

    ISC

    Unpacked Size

    18.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar