Add Media Queries to Exported React Code

Watch your code respond to breakpoints once you've added media queries

Leonardo Hurovich avatar
Written by Leonardo Hurovich
Updated over a week ago

⭐️ Note: Anima now has a native solution for React Breakpoints in the new codegen!

You can request access to it here.

Check out this video tutorial to learn how to add media queries to your exported React code so your design will be responsive using breakpoints.

Here are the steps described in the video:

  1. Add Breakpoints to your design

  2. Make sure components are added as such in Figma (buttons, for example)

  3. Sync your design to the Anima

  4. Export project into React code, and run it locally

    • In Terminal, run npm install , then npm start

    • You'll get a link to localhost that you can open in browser

  5. Open the project in VS Code, where you should see a Router on App.jsx

    • What's a Router?

      React is a single page application, which uses the same Java Script and HTML to run multiple pages. In order to have links, you need a router

    • React-router-dom for example is a popualr open source router

  6. Your different breakpoints, including the default one will display in the code, in order to show both versions, use Fireship: Media Query Hook

  7. Add useMediaQuery.jsx file to your project, under 'Hooks'

  8. Go back to the router on App.jsx and import useMediaQuery.jsx

  9. Define isDesktop as in the screenshot

  10. Change default path and delete other Route

  11. Add a condition based on isDesktop :

  12. When you shrink the browser, it should render the correct breakpoint accordingly!

Did this answer your question?