Senirupa-mq NPM

Senirupa MQ 📐

Senirupa MQ is Media Query Responsive for CSS in JS

Easy to use
Customizable
Lightweight

Install

To install Senirupa MQ

  npm i senirupa-mq --save

Usage

Have tested the Next.js project with the @emotion/css

import { css } from '@emotion/css';
import mediaQuery from 'senirupa-mq';

const mq = mediaQuery();

function App() {
	return (
		<div className={wrapTitle}>
			<h2>Senirupa</h2>
		</div>
	);
}

const wrapTitle = css`
	padding: 30px 20px;

	h2 {
		margin: 0px;
		text-align: center;
		font-size: 54px;
		font-weight: 700;

		${mq[1]} {
			font-size: 26px;
		}
	}
`;