InsertBetween.js - Inserts stuff between other stuff in React context

InsertBetween.js

'use strict';

var React = require('react');

// Inserts stuff between other stuff in React context

// Usage
// <InsertBetween separator={', '}>
//     <span>1</span>
//     <span>2</span>
//     <span>3</span>
//     <span>4</span>
//     <span>5</span>
// </InsertBetween>
// 
// <InsertBetween separator={<br />}>
//     <span>1</span>
//     <span>2</span>
//     <span>3</span>
//     <span>4</span>
//     <span>5</span>
// </InsertBetween>
// 
// <InsertBetween separator={<span>, <AddTagBetween>+</AddTagBetween> </span>}>
//     <Tag>1</Tag>
//     <Tag>2</Tag>
//     <Tag>3</Tag>
//     <Tag>4</Tag>
//     <Tag>5</Tag>
// </InsertBetween>

var InsertBetween = React.createClass({
    propTypes: {
        separator: React.PropTypes.node.isRequired
    },
    render: function() {
        var separator = this.props.separator || null;

        // React.Children.map removes need to specify keys and flattens output
        return (
            <span>
                {React.Children.map(this.props.children, function(child, index) {
                    return [
                        index === 0 ? null : separator,
                        child
                    ];
                })}
            </span>
        );
    }
});

module.exports = InsertBetween;