react-containers

Usage

    npm install --save react-containers

import {
    Center
    Render
    LeftRightSection,
    InlineItems,
    findChild,
    MappingOver,
    WrappingChildren
} from 'react-containers'

Motivation

The following components can be used to write a more declarative React components. These components combined with others like styled-components for example provides with a much more easier to read source code.

Take for example the source code of a component below

render() {

    return (
        <div className={css.container}>
            { this.state.items.map( (item,index) => {
                return (
                    <Item 
                        onClick={this.onItemClicked}
                        key={index} 
                        data={item}>
                        { item.name }
                    </Item>
                )
            })}
        </div>

    )

}

Although the code above works, it is much easier to read something like the one below

...
renderItem = (item, index) => (
    <Item 
        onClick={this.onItemClicked}
        key={index} 
        data={item}>
        { item.name }
    </Item>
)

render() {

    return (
        <Container>
            <MappingOver collection={this.state.items}>
                { this.renderItem }
            </MappingOver>
        </Container>

    )

}

...

Components

Left and Right Sections

Provide a left and/or right section. The first element is the left section while the second element is the right section. Note that if you only require a right section then make sure that the first element is not empty.

Left And Right Section

import { LeftRightSection, Center } from 'react-containers';

//left and right
<LeftRightSection>                   
    <ProductTitle>Cool Product</ProductTitle>
    <Center><Menus/></Center>
</LeftRightSection>     

Right Side Only

import { LeftRightSection, Center } from 'react-containers';

<LeftRightSection>
    <div/>
    <Center><Menus/></Center>
</LeftRightSection>

InlineItems

Renders item inline with a spacing. Similar to something like what flex will do by default.

render() {
    return (
        <div style={{display: 'flex'}}>
            <div className={'spacer'}><MySpecialElement/></div>
            <div className={'spacer'}><MyOtherElement/></div>
        </div>
    )
}

can be replaced with something like

render() {
    return (
        <InlineItems>
            <Container><MySpecialElement/></Container>
            <Container><MyOtherElement/></Container>
        </InlineItems>
    )
}

To prevent repetition, you can do something like

render() {
    return (
        <InlineItems container={Container}>
            <MySpecialElement/>
            <MyOtherElement/>
        </InlineItems>
    )
}

Center

This container will center horizontally and vertically a component rendered inside.

import { Center } from 'react-containers'

<div style={{width: 250, height: 250}}>
    <Center><SomeComponent /></Center>
</div>

You can also choose to specify the dimension of the container...

import { Center } from 'react-containers'


<Center style={{width: 250, height: 250}}>
    <SomeComponent />
</Center>

Render if

Will call the function child if ifTrue attribute is true. Note that the child can be an element or a function but it is advisable to pass a function if you dont want the element created in cases where ifTrue attribute is initially false.

<RenderIf expr={this.props.shouldRender}>
   { (props) => <MyComponent {...props} /> };
</RenderIf>

//below is the same but the function child is not created on subsequent render

class MyComponent extends React.Component {

    showToggledView = () => {
        return <ToggledView {...this.props.toggledProps }/>;
    }

    render() {
        return (
            <div>
                <SomeComponent />
                <Render ifTrue={this.props.isToggled}>
                    { this.showToggledView }
                </RenderIf>
            </div>
        )
    }

}

MappingOver

Map over a given collection specifying the function that returns the component that maps over the element. Make sure your renderer adds a key

import { MappingOver } from 'react-containers'

...
renderItem = (item, index) => (
    <Item 
        onClick={this.onItemClicked}
        key={index} 
        data={item}>
        { item.name }
    </Item>
)

render() {

    return (
        <Container>
            <MappingOver collection={this.state.items}>
                { this.renderItem }
            </MappingOver>
        </Container>

    )

}

...

The component can also use an functional component as the child. MappingOver will automatically create a React Element.

const Item = (props) => {
    const { element, index, collection, data } = props

    return (
        <div key={index}>{index}</div>
    )
}

// from another component

return (
    <Container>
        <MappingOver collection={this.state.items}>
            { Item }
        </MappingOver>
    </Container>

)

findChild

findChild is particularly useful for finding elements when you want to create tagger elements. Consider the following component

// MyComponent.js

export const Header = (props) => {
    throw new Error('should not render')
}
export const Body = (props) => {
    throw new Error('should not render')
}
export const Title = (props) => {
    throw new Error('should not render')
}

export const App = (props) => {
    const titleElement = findChild(Title, props)
    const headerElement = findChild(Header, props)
    const bodyElement = findChild(Body, props)
    
    return (
        <Container>
            <LeftRightSection>
                <TitleContainer>{ titleElement.props.children }</TitleElement>
                <MainHeaderContainer>{ headerElement.props.children }</TitleElement>
            </LeftRightSection>
            <BodyContainer>
                { bodyElement.props.children }
            </BodyContainer>
        </Container>
    )
}

Now your users will just create MyApp with something like

    import { Header, Body, Title, App } from 'myawesomeapp'

    render() {
        return (
            <App>
                <Title><Strong>My App Here</Strong></Title>
                <Header><Menus /></Header>
                <Body><MyAppContent></Body>                
            </App>
        )
    }

This makes for a far better declarative way of using your component as they dont need to worry about structuring it but only declaring sections

Contributing

You can submit a propasal if you have a container you wanted to contribute.