System-media NPM

Welcome to system-media 👋

A React utility library to match your props to the given media query

🏠 Homepage

Install

npm install system-media

Usage

Codesandbox Link:

https://codesandbox.io/s/crazy-zhukovsky-u18zw

import React from 'react';

import { system } from 'system-media';

const theme = {
  // Default breakpoints used by styled-system
  breakpoints: ['40em', '52em', '64em'],
};

const Text = ({ value }) => (
  <p
    style={{
      fontFamily: 'comic-sans',
      fontSize: '16px',
    }}
  >
    {system(theme.breakpoints)(value)}
  </p>
);

export default function App() {
  const user = 'Dan Abramov';
  const userDisplayNameMobile = user.split(' ')[0];
  const userDisplayNameDesktop = user;
  return (
    <div className="App">
      <Text
        value={[`Hi ${userDisplayNameMobile}`, `Hi ${userDisplayNameDesktop}`]}
      />
    </div>
  );
}