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

reflexbox-modern

v2.2.4-beta1

Published

React flexbox layout and grid system

Downloads

5

Readme

Reflexbox

Responsive React flexbox grid system higher order component

Build Status Code Climate npm version

Features

  • Uses inline-styles - no CSS dependencies or leaky global styles
  • Simple API for quickly controlling layout
  • Add layout capabilities to any component
  • Helps promote composability and separation of concerns

Getting Started

npm install reflexbox
// Higher order component example
import React from 'react'
import { withReflex } from 'reflexbox'

const Button = (props) => {
  return <button {...props} />
}

export default withReflex()(Button)
const App = () => {
  return (
    <div>
      <Button
        flex
        p={2}
        col={12}
        align='center'
        justify='space-between'>
        <span>Flex</span>
        <span>Button</span>
      </Button>
    </div>
  )
}

Usage with the Flex and Box components:

// Basic component example
import React from 'react'
import { Flex, Box } from 'reflexbox'

class Component extends React.Component {
  render() {
    return (
      <Flex p={2} align='center'>
        <Box px={2}>Box A</Box>
        <Box px={2} flexAuto>Box B</Box>
      </Flex>
    )
  }
}

API

Reflexbox is composed of a higher order component and three React components.

withReflex

Higher order component that accepts several layout style helper props that can handle virtually any layout composition.

Props

  • col (number 0–12) Sets width based on a 12 column grid.
  • sm (number 0-12) Sets width from the sm breakpoint and up.
  • md (number 0-12) Sets width from the md breakpoint and up.
  • lg (number 0-12) Sets width from the lg breakpoint and up.
  • align (string) Sets align-items
  • justify (string) Sets justify-content
  • wrap (boolean) Sets flex-wrap: wrap
  • flexColumn (boolean) Sets flex-direction: column
  • flexAuto (boolean) Sets flex: 1 1 auto
  • flex (boolean) Sets display: flex
  • order (boolean) Sets order

Components wrapped with the withReflex higher order component accept several layout props from the Robox higher order component, including the following:

  • gutter (number) Sets negative left and right margin to compensate for child element padding.
  • m (number) Sets margin based on a scale from 0–6.
  • mx (number) Sets x-axis margin based on a scale from 0–6.
  • my (number) Sets y-axis margin based on a scale from 0–6.
  • mt (number) Sets margin-top based on a scale from 0–6.
  • mb (number) Sets margin-bottom based on a scale from 0–6.
  • ml (number) Sets margin-left based on a scale from 0–6.
  • mr (number) Sets margin-right based on a scale from 0–6.
  • p (number) Sets padding based on a scale from 0–6.
  • px (number) Sets x-axis padding based on a scale from 0–6.
  • py (number) Sets y-axis padding based on a scale from 0–6.
  • pt (number) Sets padding-top based on a scale from 0–6.
  • pb (number) Sets padding-bottom based on a scale from 0–6.
  • pl (number) Sets padding-left based on a scale from 0–6.
  • pr (number) Sets padding-right based on a scale from 0–6.

Flex and Box components

The Flex and Box components are created with the withReflex component and use the same set of props. They are intended to help with the readability of code and to provide some backwards compatiblity with previous versions of Reflexbox. The only difference between the two is that the Flex component has flex prop set to true to set display: flex.

Grid component

The Grid component is also based on the withReflex component, but sets display inline-block for use as a more widely supported page layout component. It also includes an align prop to set vertical alignment.

<div>
  <Grid col={6} px={2}>
    Left column
  </Grid>
  <Grid col={6} px={2}>
    Right column
  </Grid>
</div>

Update on window resize

By default, Reflexbox listens to window.matchMedia for the configured breakpoints. To disable this, pass an options object to the withReflex higher-order component.

const Box = withReflex({
  listen: false
})(MyComponent)

Configuration

Values for the breakpoints can be configured with React Context.

To configure reflexbox, add childContextTypes and getChildContext to a container component.

class App extends React.Component {
  static childContextTypes = {
    reflexbox: React.PropTypes.object
  }

  getChildContext () {
    return {
      reflexbox: {
        breakpoints: {
          sm: '(min-width: 30em)',
          md: '(min-width: 48em)',
          lg: '(min-width: 60em)'
        }
      }
    }
  }

  render () {
    return (
      <Flex gutter={2}>
        <Box sm={6} md={3}>Box</Box>
        <Box sm={6} md={3}>Box</Box>
        <Box sm={6} md={3}>Box</Box>
        <Box sm={6} md={3}>Box</Box>
      </Flex>
    )
  }
}

Debug Mode

To show an 8 ⨉ 8px background grid for layout debugging, add the following to the context object:

getChildContext () {
  return {
    reflexbox: {
      debug: true
    }
  }
}

Related

MIT License