npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-svg-flexbox

v1.1.0

Published

A React-based Flexbox layout container for SVG elements.

Downloads

114

Readme

What is this?

A React-based Flexbox layout container for SVG elements.

What problem does it solve?

SVG lacks the convenient layout features of CSS; all elements must be positioned absolutely. There are ways around this (with foreignObject for instance), but there are cases where you just end up having to write cumbersome layout calculations for absolute positions. This component attempts to free us from having to do that.

Swizec Teller did a nice write-up that explains why he likes it and provides numerous examples: Build responsive SVG layouts with react-svg-flexbox.

Does it work just like Flexbox in HTML?

No. It computes positions using Facebook's css-layout, which implements a subset of the Flexbox algorithm. This table shows what is supported. These settings are not supported:

On the container:

  • align-content: space-between
  • align-items: baseline
  • align-items: stretch
  • flex-wrap: wrap-reverse
  • justify-content: space-evenly

On the children:

  • align-self
  • flex-basis
  • flex-grow
  • flex-shrink
  • order

Despite these omissions, css-layout implements enough of Flexbox to be useful.

Demo and examples

Live demo: zoopoetics.github.io/react-svg-flexbox

Here is the source for the examples. To run them locally: yarn install && yarn start.

Installation

react-svg-flexbox is intended to be installed from npm and bundled into your React app.

yarn add react-svg-flexbox

Usage

Add an instance of the Flexbox component to your app, and style it to taste. CSS-Tricks has a great overview of Flexbox if you need help on that score.

import React from 'react';
import Flexbox from 'react-svg-flexbox';

export default class App extends React.Component {
  render() {
    return (
      <svg height={600} width={800}>
        <Flexbox
          style={{
            flexDirection: 'row',
            justifyContent: 'flex-start',
          }}>
          <rect fill={'#f0c'} height={10} width={10} />
          <rect fill={'#f0c'} height={10} width={20} />
        </Flexbox>
      </svg>
    );
  }
}

For how to achieve specific layouts using this component, see the examples.

Props

className : String

Arbitrary string to set as className on the root element of the Flexbox instance. By default, the component has no class name.

onLayout : Function

Callback that will receive the entire computed layout when the layout updates. This is useful if you need to inspect layout values from a Flexbox instance in order to make decisions elsewhere in your application.

style : Object

Object containing Flexbox settings, as well as optional width and/or height. You have to pass something in order for layout to occur.

x : Number

The horizontal position, in pixels, at which the Flexbox instance should appear within its parent element.

y : Number

The vertical position, in pixels, at which the Flexbox instance should appear within its parent element.

Subtleties

React components

When the Flexbox component lays out a native SVG element, it looks at the element's type and sets its positional attributes accordingly. When Flexbox encounters a React component, however, it has no element type. As such, Flexbox passes x and y props to the React component instance and expects it to know how to deal with them. Take this usage:

import React from 'react';
import Flexbox from 'react-svg-flexbox';
import CustomComponent from 'my-app/components';

export default class App extends React.Component {
  render() {
    return (
      <svg height={600} width={800}>
        <Flexbox>
          <CustomComponent />
        </Flexbox>
      </svg>
    );
  }
}

In this case, CustomComponent must expect x and y props and use them to position its sub-elements, like so:

import React from 'react';
import PropTypes from 'prop-types';

export default class CustomComponent extends React.Component {
  static propTypes = {
    x: PropTypes.number,
    y: PropTypes.number,
  };

  render() {
    return (
      <g
        className={'CustomComponent'}
        transform={`translate(${this.props.x} ${this.props.y})`}>
        {/* stuff */}
      </g>
    );
  }
}

If you don't do this, your layout values will disappear meaninglessly into the void.

Text

You might have to fiddle with baseline style in order to get text elements into the correct vertical alignment.