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-layout-components

v3.0.6

Published

Layout Components for React based on Flexbox

Downloads

2,431

Readme

React Layout Components

npm install react-layout-components

Useful, Modern and universal layout Components for React.js based on flexbox.

The basis <Box> Component is highly inspired by React Native's Flexbox implementation and though accepts almost the same props. It supports all flexbox specifications and automatically adds alternative values and prefixes thanks to inline-style-prefix-all if needed.

npm downloads

Note: If you're not familiar with Flexbox at all, I recommend css-tricks 'Complete Guide to Flexbox' which is an awesome source for beginners as well as a nice refreshment for experts.

Components

To be able to use any of those Components below, make sure you have added the following CSS class somewhere. Personally I just inline it inside the <head> of the index.html.

.react-layout-components--box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Note: This is a temporary fix and will hopefully be removed if React merges https://github.com/facebook/react/pull/6701.

Shortcuts

Box

Box is an universal container component based on flexbox. You can most likely use this Component for everything as is helps recreating almost any possible layout.

import React from 'react'
import Box from 'react-layout-components'

const Example = () => (
  // This acts as some kind of container
  <Box width={300} height={500}>
      //This acts as an actual flexbox container
      <Box justifyContent="center" alignItems="flex-start">
        <Box flex={3}>Flex 3</Box>
        <Box flex="1 0 auto" alignSelf="baseline">Flex 1</Box>
    </Box>
  </Box>
)

Props

| Property | Description | Options | | -------------- | ------------------------ | ------------------------------------------------------------------- | | flex | | flex-grow flex-shrink flex-basis | | flexGrow | | positive integer >= 0 | | flexShrink | | positive integer >= 0 | | flexBasis | base size | size value, auto | | order | item order | | | inline | display: inline-flex | shortcut | | column | flex-direction: column | shortcut | | reverse | reverse flex-direction | shortcut | | wrap | flex-wrap: wrap | shortcut, wrap-reverse | | flow | row nowrap | flex-direction flex-wrap | | alignContent | line-content align | center, flex-start, flex-end, space-around, space-between | | justifyContent | main-axis align | center, flex-start, flex-end, space-around, space-between | | alignItems | cross-axis align | center, flex-start, flex-end, baseline, stretch | | alignSelf | item self align | center, flex-start, flex-end, baseline, stretch |

Shortcuts

| Property  | Description | | ------------ | ------------------------------------------------ | | fit | width: 100%; height: 100% | | center | justify-content: center; align-items: center |

Size

Box lets you also define size properties which are width, height, minWidth, maxWidth, minHeight and maxHeight.

Defaults

Browser default values don't need to be set explicit and are defined as

{
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
}

Container

Container is a Component to style box-model properties.

Props

  • Padding: padding, paddingLeft, paddingTop, paddingRight, paddingBottom
  • Margin: margin, marginLeft, marginTop, marginRight, marginBottom
  • Border: border, borderColor, borderWidth, borderStyle, borderTop, borderLeft, borderBottom, borderRight
  • Size: width, height, minWidth, maxWidth, minHeight, maxHeight
  • Position: top, left, bottom, right
  • Flow: overflow, overflowX, overflowY, textOverflow, whiteSpace

You may also set boxSizing which defines how the size of a box is calculated. You may use border-box, content-box or padding-box.

Shortcuts

There are some shortcut properties. They do not accept a value. e.g. <Container fixed></Container>.

| Property  | Description | | ------------ | ---------------------------------------------- | | fixed | position:fixed | | absolute | position:absolute | | borderTop | Adds a border at the top with borderWidth | | borderLeft | Adds a border to the left with borderWidth | | borderRight | Adds a border to the right with borderWidth | | borderBottom | Adds a border at the bottom with borderWidth |

Page

Page is just a shortcut for a page-filling Component. It also is fixed to the edges of your WebView.

ScrollView

ScrollView is a scrollable container. It is build on the <Box>-Component, which let's you either use default box-model sizing or flexbox sizing.

Props

| Property | Description | Options | ---------------- | --------------------------------------- | -------------------- | | height | container height | | width | container width | | horizontal | enables horizontal scrollable container | boolean | initialScrollPos | scroll position | number | onScroll | gets fired on scrolling | function

Methods

  • getScrollPosition() Returns the actual scroll position.

  • scrollTo(scrollPosition) Scrolls to the scrollPosition.

  • scrollToStart() Scrolls to the container start.

  • scrollToEnd() Scrolls to the container end.

Shortcuts

VBox

Box with flex-direction: column. (vertical flow)

Flex

Box with flex: 1 0 auto.

Center

Box centerering its children with justify-content: center; align-items: center.

Demo

To run the included demo, run the following command: $ npm run build:demo && open demo/index.html

License

react-layout-components is licensed under the MIT License. Created with ♥ by @rofrischmann.

Contributing

I would love to see people getting involved. If you have a feature request please create an issue. Also if you're even improving one of the Components by any kind please don't be shy and send a pull request to let everyone benefit.

Issues

If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.

Pull Requests

If you are creating a pull request, try to use commit messages that are self-explanatory.