Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karibash/medi-q
Type-safe media queries.
https://github.com/karibash/medi-q
css-in-js emotion react reactjs styled-components
Last synced: about 1 month ago
JSON representation
Type-safe media queries.
- Host: GitHub
- URL: https://github.com/karibash/medi-q
- Owner: Karibash
- License: mit
- Created: 2021-09-09T11:20:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-28T15:26:52.000Z (about 3 years ago)
- Last Synced: 2024-10-30T09:36:59.194Z (about 2 months ago)
- Topics: css-in-js, emotion, react, reactjs, styled-components
- Language: TypeScript
- Homepage:
- Size: 2.58 MB
- Stars: 15
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# medi-q
[](https://badge.fury.io/js/@medi-q%2Fcore)
[](https://codecov.io/gh/Karibash/medi-q)
[](https://github.com/Karibash?tab=followers)
[](https://twitter.com/intent/follow?screen_name=Karibash)
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](https://codesandbox.io/s/medi-q-emotion-example-06cjh)
- [styled-components](https://codesandbox.io/s/medi-q-styled-example-wf2hw)
## 🔧 Plugins
- [react](packages/react)
- [emotion](packages/emotion)
- [styled-components](packages/styled)
## 🗒 Examples
- [vanilla](examples/vanilla)
- [react](examples/react)
- [emotion](examples/emotion)
- [styled-components](examples/styled)
## 👏 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.
```tsx
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 (
...
);
};
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.
```tsx
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 (
{isLessThanSmall &&
isLessThanSmall}
{isGreaterThanMedium && isGreaterThanMedium}
{isBetweenSmallAndMedium && isBetweenSmallAndMedium}
);
};
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](https://github.com/Karibash/medi-q/issues) if you want to contribute.
## 📝 License
Copyright © 2020 [@Karibash](https://twitter.com/karibash).
This project is [```MIT```](https://github.com/Karibash/medi-q/blob/master/LICENSE) licensed.