{"id":21890742,"url":"https://github.com/chantastic/react-media-object","last_synced_at":"2025-04-15T13:34:40.284Z","repository":{"id":31898106,"uuid":"35466988","full_name":"chantastic/react-media-object","owner":"chantastic","description":"A media-object implementation in React.js","archived":false,"fork":false,"pushed_at":"2017-07-13T23:58:59.000Z","size":544,"stargazers_count":36,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T09:46:27.001Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://git.io/react-media-object","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/chantastic.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":"2015-05-12T04:34:33.000Z","updated_at":"2023-03-12T12:17:38.000Z","dependencies_parsed_at":"2022-08-31T00:01:16.831Z","dependency_job_id":null,"html_url":"https://github.com/chantastic/react-media-object","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Freact-media-object","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Freact-media-object/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Freact-media-object/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Freact-media-object/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/react-media-object/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249080275,"owners_count":21209498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-28T12:16:39.490Z","updated_at":"2025-04-15T13:34:40.263Z","avatar_url":"https://github.com/chantastic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Media Object\n\nThis is a Media Object implementation in React.js.\n\nThe CSS [Media Object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) was created by [Nicole Sullivan](https://twitter.com/stubbornella). It's an undeniably concise nugget of CSS. I love it.\n\nThis project is part of a proof-of-concept for React inline-styles. In practice, can a Media Object component be as usefel and flexible as the original OOCSS version.\n\n\n## Installation\n\n#### Node\n\n```bash\nnpm install react-media-object --save\n```\n\n#### In-browser\n\n```html\n\u003cscript src=\"./path/to/dist/react-media-object.js\"\u003e\u003c/script\u003e\n```\n\n*`React` must be available as a global when this script is run.*\n\n\n## Usage\n\nReactMediaObject is four components, half of which are optional\n\n```html\nvar { Media, Img, ImgExt, Bd } = require('react-media-object');\n\nvar MediaObjectWithAllRegions = (\n  \u003cMedia\u003e\n    \u003cImg href=\"http://twitter.com/chantastic\"\u003e\n      \u003cImgExt src=\"http://0.gravatar.com/avatar/d56966cb85dc4153ceeec7ca0bdb568e\" alt=\"chantastic\" /\u003e\n    \u003c/Img\u003e\n\n    \u003cBd\u003e\n      I've spent most of my career focused on taming styles in CSS. I saw it as a\n      problem that would never be solved. Then, \u003ci\u003e#reactjs\u003c/i\u003e happened.\n    \u003c/Bd\u003e\n  \u003c/Media\u003e\n);\n\nvar MediaObjectWithMinimalRegions = (\n  \u003cMedia\u003e\n    \u003cBd\u003e\n      I've spent most of my career focused on taming styles in CSS. I saw it as a\n      problem that would never be solved. Then, \u003ci\u003e#reactjs\u003c/i\u003e happened.\n    \u003c/Bd\u003e\n  \u003c/Media\u003e\n);\n\nReactDOM.render(MediaObjectWithAllRegions, mountNode);\n```\n\n\n## Development\n\nTo build the examples locally, clone and run:\n\n```bash\nnpm install\nnpm start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n\n#### Structure\n\n**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.\n\nTo build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2015 Michael Chan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Freact-media-object","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Freact-media-object","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Freact-media-object/lists"}