React Media using a curried function to manage responsive content.

ResponsiveWithCurriedProps.js

import React from 'react';
import Media from 'react-media';

// functional helper
const curry = f => a => (...b) => f(a,...b)

const Mobile = ({ title }) => <div>{title} Mobile</div>;
const Desktop = ({title}) => <div>{title} Desktop</div>;

const MediaContent = (props, matches) => {
  matches => (matches ? <Mobile {...props} /> : <Desktop {...props} />);
};
              
const Responsive = ({ ...props }) => (
  <Media query={{ maxWidth: 1023 }}>
    {curry(MediaContent)(props)}
  </Media>
);

export default Responsive;