react-misc v0.2.0

react-misc

Miscellaneous React components which I often use in my applications

CenterLayout

Summary

Center content inside it's parent container using flexbox

Usage

import { CenterLayout } from 'react-misc';

<CenterLayout
  {/* flex parent */}
  direction="row|row-reverse|column|column-reverse"
  stretch={boolean}

  {/* flex child */}
  minWidth={string|number}
  maxWidth={string|number}
  minHeight={string|number}
  maxHeight={string|number}
  grow={boolean|number}
  shrink={boolean|number}
  basis={string|number}
>
  {children}
</CenterLayout>

FlowLayout

Summary

Order content in a horizontal or vertical flow using flexbox

Usage

import { FlowLayout } from 'react-misc';

<FlowLayout
  direction="row|row-reverse|column|column-reverse"
  wrap={boolean|'wrap|nowrap|wrap-reverse'}
  justifyContent="flex-start|flex-end|center|space-between|space-around|space-evenly"
  alignContent="flex-start|flex-end|center|space-between|space-around|stretch"
  stretch={boolean}
>
  <FlowLayout.Item
    grow={boolean|number}
    shrink={boolean|number}
    basis={string|number}
  >
    {children}
  </FlowLayout.Item>
</CenterLayout>

\<FlowLayout>

\<FlowLayout.Item>

HttpError

Summary

Display basic error messages for a selection of HTTP status codes using React Intl

Usage

You need to wrap this component into an <IntlProvider>. You can use custom translations for your language. Please look at src/components/HttpError/messages.js for the supported message types.

import { HttpError } from 'react-misc';

<HttpError code={number} />

HttpError.humanize(data: number|object, fieldName: string)

\<HttpError>

The message for code 500 is displayed by default if the provided one is invalid or unsupported.

HttpError.humanize

Returns null if data is falsy, an <HttpError> otherwise.

ShadowCompound

Summary

Wraps the component inside a container which takes up the same space using react-measure. This is helpful for fixed elements which overlay the body (e.g. navigation bars).

Usage

Children are handled using react-resolve-element. Please look at The concept for information on the supported render methods.

import { Shadowcompound } from 'react-misc';

<ShadowCompound
  horizontal={boolean}
  vertical={boolean}

  component={ReactComponent}
  render={function}
>
  {children}
</ShadowCompound>

<ShadowCompound.MeasurePuppet
  horizontal={boolean}
  vertical={boolean}
  innerRef={MeasureRef}
/>

\<ShadowCompound>

The child get's a property measureRef which should be supplied to the element which size should be measured.

\<ShadowCompound.MeasurePuppet>

This component can be used if the component you want to measure doesn't support ref's. It fills up the parent and hence can be used to measure the component's size.

Example

This example shows how to use this component with a navigation bar built with a Semantic UI React menu.

class Bar extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  render() {
    const {
      measureRef,
      ...props
    } = this.props;

    return (
      <Menu {...props}>
        {/* Measure Puppet */}
        <ShadowCompound.MeasurePuppet vertical innerRef={measureRef} />

        <Menu.Item>Test</Menu.Item>
        <Menu.Item>Authentic Menu Item</Menu.Item>
      </Menu>
    );
  }
}

function Navigation(props) {
  return (
    <ShadowCompound vertical>
      <Bar fixed="top" borderless stackable {...props} />
    </ShadowCompound>
  )
}

function Page() {
  return (
    <div>
      <Navigation />
      This is page content
    </div>
  )
}

When you render <Page> you should see the navigation bar on top, and This is page content message below. You can try to switch the browser resolution between mobile and desktop to see the height change in runtime.