CSS media queries in react - for responsive design, and more.

Last update: Jun 21, 2022

react-responsive NPM version Downloads

Information

Package react-responsive
Description Media queries in react for responsive design
Browser Version >= IE6*
Demo

The best supported, easiest to use react media query module.

Install

$ npm install react-responsive --save

Example Usage

With Hooks

Hooks is a new feature available in 8.0.0!

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
    {isBigScreen && <p>You  have a huge screen</p>}
    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
    {isRetina && <p>You are retina</p>}
  </div>
}

With Components

import MediaQuery from 'react-responsive'

const Example = () => (
  <div>
    <h1>Device Test!</h1>
    <MediaQuery minWidth={1224}>
      <p>You are a desktop or laptop</p>
      <MediaQuery minWidth={1824}>
        <p>You also have a huge screen</p>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery minResolution="2dppx">
      {/* You can also use a function (render prop) as a child */}
      {(matches) =>
        matches
          ? <p>You are retina</p>
          : <p>You are not retina</p>
      }
    </MediaQuery>
  </div>
)

API

Using Properties

To make things more idiomatic to react, you can use camel-cased shorthands to construct media queries.

For a list of all possible shorthands and value types see https://github.com/contra/react-responsive/blob/master/src/mediaQuery.js#L9.

Any numbers given as shorthand will be expanded to px (1234 will become '1234px').

The CSS media queries in the example above could be constructed like this:

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({ minWidth: 1224 })
  const isBigScreen = useMediaQuery({ minWidth: 1824 })
  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })
  const isPortrait = useMediaQuery({ orientation: 'portrait' })
  const isRetina = useMediaQuery({ minResolution: '2dppx' })

  return (
    <div>
      ...
    </div>
  )
}

Forcing a device with the device prop

At times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.

Possible Keys

orientation, scan, aspectRatio, deviceAspectRatio, height, deviceHeight, width, deviceWidth, color, colorIndex, monochrome, resolution and type

Possible Types

type can be one of: all, grid, aural, braille, handheld, print, projection, screen, tty, tv or embossed

Note: The device property always applies, even when it can be detected (where window.matchMedia exists).

import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery(
     { minDeviceWidth: 1224 },
     { deviceWidth: 1600 } // `device` prop
  )

  return (
    <div>
      {isDesktopOrLaptop &&
        <p>
          this will always get rendered even if device is shorter than 1224px,
          that's because we overrode device settings with 'deviceWidth: 1600'.
        </p>
      }
    </div>
  )
}

Supplying through Context

You can also pass device to every useMediaQuery hook in the components tree through a React Context. This should ease up server-side-rendering and testing in a Node environment, e.g:

Server-Side Rendering
import { Context as ResponsiveContext } from 'react-responsive'
import { renderToString } from 'react-dom/server'
import App from './App'

...
  // Context is just a regular React Context component, it accepts a `value` prop to be passed to consuming components
  const mobileApp = renderToString(
    <ResponsiveContext.Provider value={{ width: 500 }}>
      <App />
    </ResponsiveContext.Provider>
  )
...
Testing
import { Context as ResponsiveContext } from 'react-responsive'
import { render } from '@testing-library/react'
import ProductsListing from './ProductsListing'

describe('ProductsListing', () => {
  test('matches the snapshot', () => {
    const { container: mobile } = render(
      <ResponsiveContext.Provider value={{ width: 300 }}>
        <ProductsListing />
      </ResponsiveContext.Provider>
    )
    expect(mobile).toMatchSnapshot()

    const { container: desktop } = render(
      <ResponsiveContext.Provider value={{ width: 1000 }}>
        <ProductsListing />
      </ResponsiveContext.Provider>
    )
    expect(desktop).toMatchSnapshot()
  })
})

Note that if anything has a device prop passed in it will take precedence over the one from context.

onChange

You can use the onChange callback to specify a change handler that will be called when the media query's value changes.

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {

  const handleMediaQueryChange = (matches) => {
    // matches will be true or false based on the value for the media query
  }
  const isDesktopOrLaptop = useMediaQuery(
    { minWidth: 1224 }, undefined,  handleMediaQueryChange
  );

  return (
    <div>
      ...
    </div>
  )
}
import React from 'react'
import MediaQuery from 'react-responsive'

const Example = () => {

  const handleMediaQueryChange = (matches) => {
    // matches will be true or false based on the value for the media query
  }

  return (
    <MediaQuery minWidth={1224} onChange={handleMediaQueryChange}>
      ...
    </MediaQuery>
  )
}

Easy Mode

That's it! Now you can create your application specific breakpoints and reuse them easily. Here is an example:

import { useMediaQuery } from 'react-responsive'

const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ minWidth: 992 })
  return isDesktop ? children : null
}
const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
  return isTablet ? children : null
}
const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 767 })
  return isMobile ? children : null
}
const Default = ({ children }) => {
  const isNotMobile = useMediaQuery({ minWidth: 768 })
  return isNotMobile ? children : null
}

const Example = () => (
  <div>
    <Desktop>Desktop or laptop</Desktop>
    <Tablet>Tablet</Tablet>
    <Mobile>Mobile</Mobile>
    <Default>Not mobile (desktop or laptop or tablet)</Default>
  </div>
)

export default Example

And if you want a combo (the DRY way):

import { useMediaQuery } from "react-responsive"

const useDesktopMediaQuery = () =>
  useMediaQuery({ query: "(min-width: 1280px)" })

const useTabletAndBelowMediaQuery = () =>
  useMediaQuery({ query: "(max-width: 1279px)" })

const Desktop = ({ children }) => {
  const isDesktop = useDesktopMediaQuery()

  return isDesktop ? children : null
}

const TabletAndBelow = ({ children }) => {
  const isTabletAndBelow = useTabletAndBelowMediaQuery()

  return isTabletAndBelow ? children : null
}

Browser Support

Out of the box

Chrome 9
Firefox (Gecko) 6
MS Edge All
Internet Explorer 10
Opera 12.1
Safari 5.1

With Polyfills

Pretty much everything. Check out these polyfills:

GitHub

https://github.com/contra/react-responsive
Comments
  • 1. Server rendering example

    It's not clear from this example how server rendering works. I see that only the first media query has values passed in so I imagine the other ones "don't work" on the server. Right? Are the values ignored client side in a universal component? Also, is there any recommended module for pulling out those values on the server based on the user agent? I would be happy to clarify this in the readme with a PR as soon as I learn more.

    Reviewed by nickdima at 2016-03-08 11:42
  • 2. Not usable for server-side rendered components

    This component, MediaQuery has a drawback when you are wrapping an isomorphic/universal react component. Just switch off JavaScript and see the components under MatchQuery disappear. I believe the real idea behind isomorphic components is, to also be able to render them/have them available even without JavaScript. It defeats the purpose of having universal components when they fail with JS disabled.

    Reviewed by veeracs at 2016-04-13 15:54
  • 3. Installing v8.0.0 - Cannot find source file 'webpack:///dist/react-responsive.js'

    Just installed v8.0, and currently getting this error:

    WARNING in ../node_modules/react-responsive/dist/react-responsive.js
    Module Warning (from ../node_modules/source-map-loader/index.js):
    (Emitted value instead of an instance of Error) Cannot find source file 'webpack:///dist/react-responsive.js': Error: Can't resolve './webpack:///dist/react-responsive.js' in '{...project path}/node_modules/react-responsive/dist'
    
    Reviewed by Nurymka at 2019-08-30 16:59
  • 4. [SSR] call matchMedia in componentDidMount

    Currently, if you rendered a component on the server with a certain set of values and then the component is mount in the browser the query is not reevaluated against the actual environment which might lead to an incorrect result if your assumption about the user's environment during SSR was not right.

    We can probably fix it by adding the following to the MediaQuery code:

    componentDidMount() {
      this._mql = matchMedia(this.query, values)
      this.updateMatches()
    }
    

    Is it correct? If so I can open a PR for this change

    Reviewed by vovacodes at 2018-02-22 19:41
  • 5. Div inside media query not rendering on device

    Hi - I had a div tag inside a media query that was being displayed correctly on the Chrome iphone emulator but when I viewed my app on a device the div was not being rendered (in Safari or Chrome, I checked both). As part of my testing I discovered that if I put a p tag (or I assume any tag) directly after the media query but before the div, the div would be correctly displayed (again, on both Safari and Chrome). So in order to see my div on a device I had to put an empty p tag before the div tag, which seems..odd. Could this be a bug? Thanks!

    Reviewed by sjscott84 at 2017-06-16 18:43
  • 6. Using useMediaQuery with min-width does not trigger re-rendering when orientation is changed on iPhone

    I'm using This library to detect the width of the screen and render different components, so this code:

    export const Box = () => {
      const isLarge = useMediaQuery({ query: "(min-width: 640px)" });
      return isLarge
        ? <LargeComponent />
        : <SmallComponent />; 
    };
    

    ... is not working for me on Safari/iPhone 10/11 either native device or simulator. Works on Android Chrome and Desktop Chrome Emulator.

    Reviewed by seleckis at 2019-11-25 12:03
  • 7. Does not rerender when values changes

    Tried using the new version but it's still not working. GetDerivedStateFromProps returns null even though values object changes. I think the we need to store forceStatic in the state.

    when we store forcesStatic in the state it triggers a rerender if we omit it after first render on the client. screen shot 2019-01-29 at 13 52 38

    The same but without storing forceStatic in the state screen shot 2019-01-29 at 13 55 46

    Reviewed by Herdismaria at 2019-01-29 13:09
  • 8. Can't figure out how to test using Enzyme.

    Is it possible to test React-Responsive components with Enzyme.

    the key parts of my code look like this:

    export default class AppContainer extends React.Component {
      render(){
        return(
          <MediaQuery minDeviceWidth={750}>
             <Header />
          </MediaQuery>
        );
      }
    }
    
    describe("App", () => {
      let App;
      let wrapper;
      beforeEach(() => {
        wrapper = mount(<Provider store={store}><AppContainer location={location} /></Provider>);
        App = wrapper.find(AppContainer);
    
      });
      it('to have a <Header /> component', () => { 
        console.log(App.debug());
        expect(App.find(Header)).to.have.length(1);
      });
    }
    

    The test result is:

    1) AppContainer to have a <Header /> component:
    AssertionError: expected { Object (component, root, ...) } to have a length of 1 but got 0
    

    The relevant part of the output of the console.log is: <MediaQuery minDeviceWidth={750} values={{...}} /> Indicating that Header is indeed not appearing in the render tree. However if I remove the MediaQuery and make Header a direct child of AppContainer the test passes.

    I imagine this is not a bug as I'm very new to Enzyme and testing components in general. Any help or examples would be appreciated.

    Reviewed by domhede at 2016-08-25 12:55
  • 9. Getting checksum was invalid error for server-side rendered component

    I'm getting checksum invalid error,

    warning.js:45Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

    Reviewed by veeracs at 2016-03-16 16:29
  • 10. a bit large

    Adding this lib to my react app, it adds 12.4KB (uglified) to my built js file (3.6KB gzipped) which seems very large for what this does. Is there perhaps one of the dependencies being mostly responsible for this bloat, that could be replaced by something else?

    Reviewed by pekeler at 2016-01-08 01:20
  • 11. implement useMediaQuery hook and fix tests

    Adds hooks support and References #180

    • [x] Split component logic to a hook
    • [x] Use Context in a hook
    • [x] Make old tests pass
    • [x] Write separate test for MediaQuery component and useMediaQuery hook
    • [x] Try to split state in useMediaQuery hook
    • [x] Think of a final useMediaQuery API (arguments it takes and what it returns)
    • [x] Make sure hook is optimized
    • [x] React.memo on MediaQuery? (don't think it's a good idea, React.memo creates a HOC and diffing might be even more expensive than the time saved, it's better to leave it up to the user)
    • [x] Investigate whether shallow-equal dependency could be avoided (I don't know how to replace it, but it's tiny and it adds a really good optimization)
    Reviewed by Tomekmularczyk at 2019-06-09 10:24
  • 12. React Responsive doesn't work if i refresh the page

    React Responsive doesn't work while on mobile

    When i working on next.js project from desktop. I open the mobile preview mode and in there have no problem, but if i refresh my page in preview mode react-responsive doesn't work, thats why in production doesn't work

    Example Use;

    index.js

    export default function Home({ logs, version, texts }) {
      const isTablet = useMediaQuery({ query: "(max-width: 1024px)" });
    
      return (
        <>
          <Box height="8px" background="#107c41"></Box>
          <SimpleGrid columns={isTablet ? 1 : 2}>
            <Infos texts={texts} version={version} logs={logs} />
            <Upload texts={texts} />
          </SimpleGrid>
        </>
      );
    

    upload.js

    export default function Upload(props) {
      const value = useContext(ItemStore)
      const { colorMode } = useColorMode();
      const [isUpload, setIsUpload] = useState(false);
      const isTablet = useMediaQuery({ query: "(max-width: 1024px)" });
      const isMobileXL = useMediaQuery({ query: "(max-width: 600px)" });
      const toast = useToast();
    
      function handleFile(file) {
    
        if (!file)
          return toast({
            title: "File upload failed",
            status: "warning",
            position: "top-left",
            isClosable: true,
          });
    
        if (!file.type === excel && !file.type === csv)
          return toast({
            title: "Wrong file type",
            status: "error",
            position: "top-left",
            isClosable: true,
          });
    
        switch (file.type) {
          case excel:
            readXlsxFile(file).then((rows) => {
              value.setvalue(rows);
            });
            setIsUpload(true);
            break;
    
          case csv:
            let fileReader = new FileReader();
            fileReader.onloadend = (e) => {
              value.setvalue(
                fileReader.result
                  .toString()
                  .split("\n")
                  .map((e) => e.trim())
                  .map((e) => e.split(",").map((e) => e.trim()))
              );
            };
            setIsUpload(true);
            break;
    
          default:
            toast({
              title: "Wrong file type",
              status: "error",
              position: "top-left",
              isClosable: true,
            });
            break;
        }
      }
    
      return (
        <Box
          padding={(isTablet ? "0rem" : "4rem") && (isMobileXL ? "1rem" : "4rem")}
          paddingTop={isTablet ? "0rem" : null}
          borderLeft={isMobileXL ? "0" : "1px solid gray"}
        >
          <Text
            color={colorMode === "light" ? "#107c41" : "white"}
            fontSize={(isTablet ? "xl" : "2xl") && (isMobileXL ? "md" : "2xl")}
          >
            <InfoIcon mr="0.5rem" /> {props.texts.uploadlayer}
          </Text>
          <Collapse in={isUpload} animateOpacity>
            <Button
              mt="2"
              _focus="none"
              onClick={() => {
                value.setvalue(null);
                setIsUpload(false);
                document.getElementsByClassName("docs").value = null;
              }}
              size={isMobileXL ? "sm" : "md"}
              leftIcon={<DeleteIcon />}
              colorScheme="green"
              display="block"
              w="100%"
            >
              Delete
            </Button>
          </Collapse>
          <FormControl
            borderRadius="0.5rem"
            border="2px dashed gray"
            mt="3"
          >
            <FormLabel
              color={colorMode === "light" ? "#107c41" : "white"}
              p="1rem"
              fontWeight="bold"
              fontSize={isMobileXL ? "md" : "2xl"}
            >
              {isUpload ? <CheckIcon /> : <DownloadIcon />} Upload your file
            </FormLabel>
            <Input
              className="docs"
              onChange={(e) => handleFile(e.target.files[0])}
              type="file"
              opacity="0"
              accept=".xlsx, .csv"
              border="0px"
            />
          </FormControl>
          {value.value
            ? value.value
                .slice(1)
                .map((element, index) => (
                  <Result key={index} label={value.value[0]} items={element} />
                ))
            : null}
        </Box>
      );
    }
    

    For better explain;

    When i without refresh open preview mode

    image

    But if I refresh page in preview mode it looks like this;

    image

    My package.json;

    {
      "name": "invoice-printer-next",
      "version": "0.1.1",
      "private": true,
      "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start"
      },
      "dependencies": {
        "@chakra-ui/core": "^0.8.0",
        "@chakra-ui/icons": "^1.0.6",
        "@chakra-ui/react": "^1.3.4",
        "@emotion/react": "^11.1.5",
        "@emotion/styled": "^11.1.5",
        "framer-motion": "^3.10.2",
        "gray-matter": "^4.0.2",
        "jsonwebtoken": "^8.5.1",
        "next": "10.0.8",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-markdown": "^5.0.3",
        "react-youtube": "^7.13.1",
        "read-excel-file": "^5.0.0"
      },
      "devDependencies": {
        "react-responsive": "^8.2.0"
      }
    }
    
    Reviewed by jack5341 at 2021-03-27 13:13
  • 13. Context for server-side-rendering hard set the width

    I am trying to use react-responsive to conditional rendering components base on device width. Everything worked great in client side, but for SSR I followed the documentation to use Context to pass a specific width for initial server render. However, the width that react-responsive received now hard set to the width in Context even if I resize the browser.

    Component to define device base on device width:

    import { useMediaQuery } from 'react-responsive';
    
    export const Desktop = ({ children }) => {
    const isDesktop = useMediaQuery({ minWidth: 801 });
    return isDesktop ? children : null;
    };
    
    export const Tablet = ({ children }) => {
    const isTablet = useMediaQuery({ minWidth: 426, maxWidth: 800 });
    return isTablet ? children : null;
    };
    
    export const Mobile = ({ children }) => {
    const isMobile = useMediaQuery({ maxWidth: 425 });
    return isMobile ? children : null;
    };
    
    export const MobileTablet = ({ children }) => {
    const isMobile = useMediaQuery({ maxWidth: 800 });
    return isMobile ? children : null;
    };
    

    My use for DeviceIdentifier component:

    ...
         <Desktop>
            <CategoryTree />
         </Desktop>
    ...
          <MobileTablet>
            <BurgerMenu
              open={burgerMenuOpen}
              onOpenStateChange={setBurgerMenuOpen}
            />
          </MobileTablet>
    ...
    

    Context wrapper in _app.js

    import { Context as ResponsiveContext } from 'react-responsive';
    
    ...
    <ResponsiveContext.Provider value={{ width: 1440 }}>
        <Component {...pageProps} />
    </ResponsiveContext.Provider>
    ....
    

    Since I set the width in the context 1440px, my BurgerMenu component is currently never rendered even if resize the browser. Anybody have any idea how to make this work both in SSR and client side?

    Reviewed by lenghia241 at 2020-05-29 11:02
  • 14. Nextjs: Expected server HTML to contain a matching
    in

    I have tried all the available options and all of them brings me back this same error.

    Example: <MediaQuery minDeviceWidth={1024}> <div>Desktop Only</div> </MediaQuery>

    Reviewed by ivanhueso at 2020-05-22 16:46
  • 15. Nested responsive components that use refs results in stale elements in Safari

    Hello, we use examples provided in Easy Mode section of the doc and faced the issue that reproduces in Safari (13.0.5) on Mac OS. The problem occurs when the responsive components are nested and there is some child that uses ref. Something like this (sandbox)

    const Leaking = ({ children }) => {
      const ref = React.useRef();
      React.useEffect(() => {
        // do smth with ref
        console.log(ref.current.clientWidth);
      });
    
      return <div ref={ref}>{children}</div>
    }
    
    const ResponsiveChild = () => {
      return (
        <div>
          <Desktop>
            <Leaking>Desktop</Leaking>
          </Desktop>
          <Mobile>
            <Leaking>Mobile</Leaking>
          </Mobile>
        </div>
      );
    };
    
    export const Issue = () => {
      return (
        <div>
          <Mobile>
            <ResponsiveChild />
          </Mobile>
          <Default>
            <ResponsiveChild />
          </Default>
        </div>
      );
    

    After resizing the window back and forward the following warning occurs: and some elements get duplicated. We found this issue in 8.0.3 version but it also presents in 7.0.0.

    Reviewed by shlangus at 2020-03-21 00:28
  • 16. Rendering a component differently in print

    I wonder if someone can give me some usage pointers. I have a component that is collapsible on screen that I want to render in full if the page is printed. I cannot figure out a CSS approach. I put together the following render method for the component, but the page gets caught some kind of loop; it doesn't load, but doesn't throw any errors or warnings. I expect I'm making an obvious mistake. Thanks.

    render() {
       return (
         <MediaQuery print={true}>
           {(matches) => matches ?
             <span>
               {// component for printing}
             </span> :
             <span>
               {// component for screen}
             </span>
           }
         </MediaQuery>
       );
     }
    
    Reviewed by garzohugo at 2020-01-24 14:19
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Jun 20, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022
:package: Modular responsive component

React Container Query True modularity in styling responsive component. Installation npm i -D react-container-query Disclaimer I am providing code in t

Jun 18, 2022
The UI design language and React library for Conversational UI
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

Jun 9, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021
A styled switch for React built using Emotion CSS and Framer motion
A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

Jun 27, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022
Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

Jun 19, 2022
Loads a Sass/SCSS file and compiles it to CSS.
Loads a Sass/SCSS file and compiles it to CSS.

sass-loader Loads a Sass/SCSS file and compiles it to CSS. Getting Started To begin, you'll need to install sass-loader: npm install sass-loader sass

Jun 20, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

Jun 19, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Vite plugin that emulates Scoped CSS for React components

vite-react-css Vite plugin that emulates Scoped CSS for React components (using generated class names) Compatible with SSR Automatic code-splitting Ho

Feb 7, 2022