{"id":22443218,"url":"https://github.com/tuckerconnelly/uranium","last_synced_at":"2025-08-01T18:34:08.569Z","repository":{"id":48336750,"uuid":"51841375","full_name":"tuckerconnelly/uranium","owner":"tuckerconnelly","description":"Universal css-in-js media queries for React Native and React","archived":false,"fork":false,"pushed_at":"2018-04-30T20:46:10.000Z","size":74,"stargazers_count":127,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-06-19T03:04:46.972Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tuckerconnelly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-16T14:22:18.000Z","updated_at":"2021-07-16T18:34:30.000Z","dependencies_parsed_at":"2022-09-15T17:02:45.911Z","dependency_job_id":null,"html_url":"https://github.com/tuckerconnelly/uranium","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuckerconnelly%2Furanium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuckerconnelly%2Furanium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuckerconnelly%2Furanium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuckerconnelly%2Furanium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuckerconnelly","download_url":"https://codeload.github.com/tuckerconnelly/uranium/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228399729,"owners_count":17913838,"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-12-06T02:26:05.495Z","updated_at":"2024-12-06T02:26:06.205Z","avatar_url":"https://github.com/tuckerconnelly.png","language":"JavaScript","funding_links":[],"categories":["Index"],"sub_categories":["Flexbox Model"],"readme":"Uranium\n==========\nAdds media-query support to css-in-js in React Native *and* React.\n\n```js\n\nexport default () =\u003e \u003cView css={styles.base} /\u003e\n\nconst styles = {\n  base: {\n    height: 120,\n\n    '@media (min-width: 600px)': {\n      height: 56,\n    },\n  },\n}\n```\n\niOS | Web\n:---:|:---:\n![iOS Uranium Example](https://media.giphy.com/media/l3vRgLQX10iWWAJTW/giphy.gif)  |  ![web Uranium example](https://media.giphy.com/media/3o7TKtmlPcvc2xdj3i/giphy.gif)\n\nAlso works with android and server-side rendering\n\nThis can be used with [react-native-web](https://github.com/necolas/react-native-web) for a basic write-once, run-anywhere React Native app.\n\n### Installation\n\nIf using in React Native, install  [react-native-match-media](https://github.com/tuckerconnelly/react-native-match-media)\n\nMake sure `global.matchMedia` is set:\n\n```js\nimport matchMedia from 'react-native-match-media'\n\n// Only for native, will already be set on web\nglobal.matchMedia = matchMedia\n```\n\nThen:\n\n```\nnpm -S i tuckerconnelly/uranium\n```\n\n### Usage\n\nUse the `css` property to add styles with media queries.\n\nThen wrap your component in `Uranium`\n\n```js\nimport React, { PropTypes } from 'react'\nimport { View } from 'react-native'\nimport Uranium from 'uranium'\n\nimport Shadows from './styles/Shadows'\n\nconst MyComponent = () =\u003e\n  \u003cView css={styles.base}\u003e\n    \u003cText\u003eSome text\u003c/Text\u003e\n  \u003c/View\u003e\n\nexport default Uranium(MyComponent)\n\n\nconst styles = {\n  base: {\n    backgroundColor: 'red',\n\n    '@media (min-width: 480px)': {\n      backgroundColor: 'blue',\n    }\n  },\n}\n```\n\n### animate() function\n\nUranium adds the `animate()` function to make animations simple in React Native, and to take into account the current screen size/media query when animating.\n\nIt supports the following signatures:\n\n```js\nanimate(from: Object, to: Object, on: Animated.AnimatedValue)\nanimate(props: Array\u003cstring\u003e, from: Object, to: Object, on: Animated.AnimatedValue)\nanimate(prop: string, from: number, to: number, on: AnimatedValue)\n```\n\nIt expects the `AnimatedValue` to animate from 0 to 1.\n\nHere it is used in a component:\n\n```js\nimport React from 'react'\nimport { View, Animated } from 'react-native'\nimport Uranium, { animate } from 'uranium'\n\nclass ExpandOnPress extends Component {\n  state = { expanded: false }\n\n  _expandAV = new Animated.Value(0)\n\n  _toggleExpanded() {\n    Animated.timing(this._expandAV, {\n      toValue: this.state.expanded ? 0 : 1,\n      duration: 300,\n    })\n\n    this.setState({ expanded: !this.state.expanded })\n  }\n\n  render() {\n    return (\n      \u003cView\n        css={[\n          styles.base,\n          animate(styles.notExpanded, styles.expanded, this._expandAV),\n          animate('opacity', 0.25, 1, this._expandAV)\n        ]}\n        onPress={this._toggleExpanded} /\u003e\n    )\n  }\n}\n\nexport default Uranium(ExpandOnClick)\n\nconst styles = {\n  base: {\n    backgroundColor: 'blue',\n  },\n\n  notExpanded: {\n    width: 20,\n    height: 20,\n  },\n\n  expanded: {\n    width: 40,\n    height: 40,\n  }\n}\n\n```\n\nThis will animate all the styles on `styles.notExpanded` to all the styles on `styles.expanded` on the `_expandAV` AnimatedValue.\n\nSo `width` will animate from 20 to 40, and `height` will also animate from 20 to 40.\n\nThis also animates opacity from '0.25' to '1'.\n\nIf `styles.notExpanded` contained a property you didn't want to animate, like `borderRadius`, you could have specified specific values to animate:\n\n```\nanimate(['width', 'height'], styles.notExpanded, styles.expanded, this._expandAV)\n\n...\n\nstyles = {\n  notExpanded: {\n    width: 20,\n    height: 20,\n    borderRadius: 2,\n  },\n\n  expanded: {\n    width: 40,\n    height: 40,\n  }\n}\n```\n\nNote! The `AnimatedValue` must go from `0` to `1` (and vice versa).\n\n### Inspiration\n\nMany thanks to the creators of [Radium](https://github.com/FormidableLabs/radium) who inspired this library.\n\nIn fact, the name is a play on Radium: Universal Radium = Uranium :)\n\n### Connect\n\nFollow the creator on Twitter, [@TuckerConnelly](https://twitter.com/TuckerConnelly)\n\n### License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuckerconnelly%2Furanium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuckerconnelly%2Furanium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuckerconnelly%2Furanium/lists"}