Give the developer the ability to have more flexibility on the layout if a function is passed as children.

react-optional-function-as-children.jsx

const propTypes = {
  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
};

const defaultProps = {
  children: null,
};

const SaveButton = () => ...
const ActionsContainer = ({ children }) => ...

const ConfigurationPanel = ({ children, onSave }) =>
  <div>
    {typeof children === 'function'
      ? children({
          ActionsContainer,
          SaveButton: () => <SaveButton handleClick={onSave} />,
        })
      : <div>
          {children}
          <ActionsContainer>
            <SaveButton handleClick={onSave} />
          </ActionsContainer>
        </div>}
  </div>;

// Simple usage, less flexiblity on the rendered layout.
const App = () => (
  <ConfigurationPanel>
    <div>Some children as node here</div>
  </ConfigurationPanel>
);

// Advanced usage, more flexiblity on the rendered layout.
const App = () => (
  <ConfigurationPanel>  
    {({ ActionsContainer, SaveButton }) => (
      <div>Some children></div>
      <ActionsContainer>
        <CancelButton />
        <SaveButton />
      </ActionsContainer>
    )}
  </ConfigurationPanel>
);

ReactDOM.render(<App />, document.getElementById('root'));