{"id":18426157,"url":"https://github.com/wework/include-media-redux","last_synced_at":"2026-05-03T18:33:22.527Z","repository":{"id":57273264,"uuid":"93899917","full_name":"wework/include-media-redux","owner":"wework","description":"An adaptation of include-media-exports for redux","archived":false,"fork":false,"pushed_at":"2019-05-08T20:03:56.000Z","size":131,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-09-29T01:36:07.730Z","etag":null,"topics":["css","include-media","react","react-redux","redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wework.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-09T22:00:47.000Z","updated_at":"2017-06-14T00:25:15.000Z","dependencies_parsed_at":"2022-09-17T02:23:04.771Z","dependency_job_id":null,"html_url":"https://github.com/wework/include-media-redux","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/wework/include-media-redux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wework%2Finclude-media-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wework%2Finclude-media-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wework%2Finclude-media-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wework%2Finclude-media-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wework","download_url":"https://codeload.github.com/wework/include-media-redux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wework%2Finclude-media-redux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32579820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","include-media","react","react-redux","redux"],"created_at":"2024-11-06T05:07:03.781Z","updated_at":"2026-05-03T18:33:22.508Z","avatar_url":"https://github.com/wework.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"include-media-redux\n====================\n\n[![Build Status][travis-image]][travis-url]\n[![Coverage Status][coveralls-image]][coveralls-url]\n[![NPM version][npm-version-image]][npm-url]\n[![NPM downloads][npm-downloads-image]][npm-url]\n[![MIT License][license-image]][license-url]\n\n\u003eAn adaptation of include-media-exports for redux.\n\n# Introduction\n\nThis library is intended to make JS and CSS speak the same language when it comes to media queries. It is heavily inspired by [`include-media-export`](https://github.com/eduardoboucas/include-media-export). Using this library assumes that you are:\n\n- already using [`include-media`](https://github.com/eduardoboucas/include-media) to declare your breakpoints\n- writing your CSS in Sass\n- using redux to manage the state of your React application\n\n# Usage\n\n```jsx\n// Content.jsx\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { media } from 'include-media-redux';\n\nfunction Content({ lessThanMd }) {\n  if (lessThanMd) {\n    return 'Hello world from BELOW the `md` breakpoint.';\n  }\n\n  return 'Hello world from ABOVE the `md` breakpoint.';\n}\n\nexport default connect(state =\u003e ({\n  lessThanMd: media.is.lessThan('md')(state),\n}))(Content);\n\n// App.jsx\nimport React from 'react';\nimport { withMedia } from 'include-media-redux';\nimport Content from './Content.jsx';\n\nfunction App() {\n  return \u003cdiv\u003e\u003cContent /\u003e\u003c/div\u003e;\n}\n\n// `withMedia` registers the `resize` listeners on `window` and updates the redux store.\n// Needs to be nested within a `react-redux` `Provider`.\nexport default withMedia(App);\n\n// Root.jsx\nimport React from 'react';\nimport { Provider } from 'react-redux';\nimport { createStore } from 'redux';\nimport { media, reducer } from 'include-media-redux';\nimport App from './App.jsx';\n\n// Configure your breakpoints. Should be the same breakpoints used for\n// the `include-media` Sass library.\nmedia({\n  breakpoints: {\n    sm: 300,\n    md: 800,\n  },\n});\n\nconst store = createStore(reducer);\n\nexport default function Root() {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cApp /\u003e\n    \u003c/Provider\u003e\n  );\n}\n```\n\n# Development\n\nIn lieu of a formal style guide, please ensure PRs follow the conventions present, and have been properly linted and tested. Feel free to open issues to discuss.\n\nBe aware this module is tested in both browser and node runtimes.\n\n## Available tasks\n\n### Build and test\nRuns all tests, static analysis, and bundle for distribution\n```shell\n$ yarn start\n```\n\n### Test\nRuns browser and node tests\n```shell\n$ yarn test\n```\n\nRuns browser tests via PhantomJS only\n```shell\n$ yarn test:browser:once\n```\n\nRuns browser tests via SauceLabs only\n```shell\n$ SAUCELABS=true yarn test:browser:once\n```\n\nRuns node tests only\n```shell\n$ yarn test:node:once\n```\n\n### TDD\nRuns browser and node tests in watch mode, re-bundles on src file change\n```shell\n$ yarn tdd\n```\n\n### Bundle\nPackages client and node bundles for distribution, output to `/dist`\n```shell\n$ yarn bundle\n```\n\n### Distribute\nLints, cleans, and bundles for distribution\n```shell\n$ yarn dist\n```\n\n### Release\nWe're using `np` to simplify publishing to git + npm. A changelog and docs are generated as part of this script.\n\n```shell\n$ yarn release \u003csemver level/version\u003e\n$ yarn release patch # patch release\n$ yarn release 100.10.1 # release specific version\n```\n\n[npm-url]: https://npmjs.org/package/include-media-redux\n[npm-version-image]: http://img.shields.io/npm/v/include-media-redux.svg?style=flat-square\n[npm-downloads-image]: http://img.shields.io/npm/dm/include-media-redux.svg?style=flat-square\n\n[coveralls-image]:https://coveralls.io/repos/github/wework/include-media-redux/badge.svg?branch=master\n[coveralls-url]:https://coveralls.io/github/wework/include-media-redux?branch=master\n\n[travis-url]:https://travis-ci.org/wework/include-media-redux\n[travis-image]: https://travis-ci.org/wework/include-media-redux.svg?branch=master\n\n[license-url]: LICENSE\n[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwework%2Finclude-media-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwework%2Finclude-media-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwework%2Finclude-media-redux/lists"}