karibash / medi-q

Type-safe media queries.

medi-q

The medi-q package is a framework agnostic for simply generating media queries.

This package is currently an experimental version.
Please be aware that destructive changes may be made.

👀 Demo

• emotion
• styled-components

🔧 Plugins

• react
• emotion
• styled-components

🗒 Examples

• vanilla
• react
• emotion
• styled-components

👏 Getting Started

Use the ThemeProvider component to pass the Theme object and MediQ object to the subordinate components. If you do not use the styled api, use the MediQProvider in @medi-q/react.

import React from 'react';
import { BreakPoints, createMediQ } from '@medi-q/core';
import { ThemeProvider } from '@medi-q/emotion';
// import { ThemeProvider } from '@medi-q/styled';
// import { MediQProvider } from '@medi-q/react';

import { theme } from './theme';

const breakPoints: BreakPoints = {
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
};

const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme} mediQ={createMediQ(breakPoints)}>
      ...
    </ThemeProvider>
  );
};

export default App;

By using the useMediQ hook in the lower-level component, you can execute a media query. You can also generate media queries with multiple conditions by connecting the queries with and or.

import React from 'react';
import styled from '@emotion/styled';
import { useMediQ } from '@medi-q/react';

const Wrapper = styled.div`
  background: ${props => props.theme.background};

  ${props => props.theme.mediQ('max-medium')} {
    background: blue;
  }
`;

const Page: React.FC = () => {
  const isLessThanSmall = useMediQ('max-small');
  const isGreaterThanMedium = useMediQ('min-medium');
  const isBetweenSmallAndMedium = useMediQ('min-small-and-max-medium');
  return (
    <Wrapper>
      {isLessThanSmall && <div>isLessThanSmall</div>}
      {isGreaterThanMedium && <div>isGreaterThanMedium</div>}
      {isBetweenSmallAndMedium && <div>isBetweenSmallAndMedium</div>}
    </Wrapper>
  );
};

export default Page;

🚀 Installation

$ npm install @medi-q/core @medi-q/react

with emotion

$ npm install @medi-q/core @medi-q/react @medi-q/emotion

with styled-components

$ npm install @medi-q/core @medi-q/react @medi-q/styled

🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check issues page if you want to contribute.

📝 License

Copyright © 2020 @Karibash.

This project is MIT licensed.