https://github.com/metabolize/react-flexbox-svg

Flexbox for SVG in React, using css-layout
https://github.com/metabolize/react-flexbox-svg

flexbox layout react react-component svg

Last synced: about 2 months ago
JSON representation

Flexbox for SVG in React, using css-layout

• Host: GitHub
• URL: https://github.com/metabolize/react-flexbox-svg
• Owner: metabolize
• License: isc
• Created: 2017-03-01T02:58:44.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T03:32:21.000Z (almost 3 years ago)
• Last Synced: 2025-10-06T01:54:27.085Z (5 months ago)
• Topics: flexbox, layout, react, react-component, svg
• Language: JavaScript
• Homepage: https://react-flexbox-svg.netlify.app/
• Size: 2.02 MB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-flexbox-tutorials - react-flexbox-svg

README

          
# react-flexbox-svg

[![version](https://img.shields.io/npm/v/react-flexbox-svg.svg?style=flat-square)][npm]

[![license](https://img.shields.io/npm/l/react-flexbox-svg.svg?style=flat-square)][npm]

[![build](https://img.shields.io/circleci/project/github/metabolize/react-flexbox-svg.svg?style=flat-square)][build]

[![code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)][prettier]

[npm]: https://www.npmjs.com/package/react-flexbox-svg

[build]: https://circleci.com/gh/metabolize/react-flexbox-svg/tree/master

[prettier]: https://prettier.io/

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][dlmanning/react-flexbox-svg] by

[David Manning][dlmanning].

[css-layout]: https://www.npmjs.com/package/css-layout

[yoga]: https://facebook.github.io/yoga/

[dlmanning/react-flexbox-svg]: https://github.com/dlmanning/react-flexbox-svg

[dlmanning]: https://github.com/dlmanning

## 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

```jsx

import React from 'react'

import { FlexContext, FlexContainer } from 'react-flexbox-svg'

class StackedItemCollection extends React.Component {

  render() {

    return (

      

        

          

            

            

            

          

        

      

    )

  }

}

```

```jsx

class Item extends React.Component {

  render() {

    const { height } = Item.layout

    return 

  }

}

Item.layout = { margin: 25, height: 50 }

export default layoutable(props => Item.layout)(Item)

```

As a functional component:

```jsx

const Item = layoutable(props => ({ margin: 10, height: 50 }))(() => (

  

))

```

Using ES7 decorators:

```jsx

@layoutable(props => Item.layout)

class Item extends React.Component {

  render() {

    const { height } = Item.layout

    return 

  }

}

Item.layout = { margin: 10, height: 100 }

```

In the [examples](examples/) folder is a more interesting example featuring a

[dynamic collection](examples/dynamic-collection.js).

## Installation

```sh

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.