react-comp-children

A react component that makes easy to mount children dynamically.

Installation

1npm install --save react-comp-children

Examples

Activate one of children

1import Children from 'react-comp-children';
2...
3render() {
4    const items = [<A />, <B />, <C />];
5    return (
6        <div>
7            <Children items={ items } active={ 1 } />
8        </div>
9    );
10}
11...

equals to

1...
2    <div>
3        <B />
4    </div>
5...

for array items - inline

1import Children from 'react-comp-children';
2...
3render() {
4    const items = [<A />, <B />, <C />];
5    return (
6        <div>
7            <Children items={ items } active={ [0, 2] } />
8        </div>
9    );
10}
11...

equals to

1...
2    <div>
3        <A /><C />
4    </div>
5...

for array items - block

1import Children from 'react-comp-children';
2...
3render() {
4    return (
5        <div>
6            <Children active={ [0, 2] }>
7                <A />
8                <B />
9                <C />
10            </Children>
11        </div>
12    );
13}
14...

equals to

1...
2    <div>
3        <A /><C />
4    </div>
5...

for object items

1import Children from 'react-comp-children';
2...
3render() {
4    const items = {
5        a: <A />,
6        b: <B />,
7        c: <C />,
8    };
9    return (
10        <div>
11            <Children items={ items } active={ ['a', 'b'] } />
12        </div>
13    );
14}
15...

equals to

1...
2    <div>
3        <A /><B />
4    </div>
5...

License

MIT