{"id":20196829,"url":"https://github.com/itsjonq/styled-view","last_synced_at":"2025-10-05T17:10:11.138Z","repository":{"id":36458871,"uuid":"224709786","full_name":"ItsJonQ/styled-view","owner":"ItsJonQ","description":"✌️ UI Primitive for React, with CSS-in-JS support","archived":false,"fork":false,"pushed_at":"2022-12-13T20:14:56.000Z","size":3486,"stargazers_count":10,"open_issues_count":22,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T14:18:37.702Z","etag":null,"topics":["component","css","css-in-js","emotion","react","reactjs","styled","styled-components","styled-system","view"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/styled-view-demo-fsg08","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/ItsJonQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-28T18:32:11.000Z","updated_at":"2020-04-24T01:30:00.000Z","dependencies_parsed_at":"2023-01-17T01:45:30.794Z","dependency_job_id":null,"html_url":"https://github.com/ItsJonQ/styled-view","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fstyled-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fstyled-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fstyled-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fstyled-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/styled-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248201042,"owners_count":21064025,"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":["component","css","css-in-js","emotion","react","reactjs","styled","styled-components","styled-system","view"],"created_at":"2024-11-14T04:26:13.679Z","updated_at":"2025-10-05T17:10:06.074Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✌️ Styled View\n\n[![Build Status](https://travis-ci.org/ItsJonQ/styled-view.svg?branch=master)](https://travis-ci.org/ItsJonQ/styled-view)\n[![Coverage Status](https://coveralls.io/repos/github/ItsJonQ/styled-view/badge.svg?branch=master)](https://coveralls.io/github/ItsJonQ/styled-view?branch=master)\n[![Bundle size](https://badgen.net/bundlephobia/minzip/styled-view)](https://bundlephobia.com/result?p=styled-view)\n\n\u003e UI Primitive for React, with CSS-in-JS support\n\n## Table of contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n    -   [`css` function](#css-function)\n    -   [`css` prop](#css-prop)\n    -   [`sx` prop](#sx-prop)\n    -   [Mixins](#mixins)\n    -   [Theming](#theming)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm install styled-view\n```\n\n## Usage\n\nThe `\u003cView\u003e` component supports all of the default [CSSProperties](https://github.com/ItsJonQ/is-style-prop-valid/blob/master/src/CSSProperty.js#L47) as props. The styles transformed and handled by [Emotion](https://emotion.sh/docs/introduction).\n\n```jsx\nimport React from 'react';\nimport { View } from 'styled-view';\n\nfunction Example() {\n\treturn (\n\t\t\u003cView backgroundColor=\"#eee\" padding={20}\u003e\n\t\t\tHello\n\t\t\u003c/View\u003e\n\t);\n}\n```\n\n### `css` function\n\n`css` is a utility function that works with the `\u003cView /\u003e` `css` prop. The API is similar to the [Emotion's css prop](https://emotion.sh/docs/css-prop#string-styles). Unlike the `css` prop, the [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) allows for functions, which is handy for mixins.\n\n```jsx\nimport React from 'react';\nimport { css, View } from 'styled-view';\n\nfunction Example() {\n\tconst variant = ({ variant }) =\u003e {\n\t\tswitch (variant) {\n\t\t\tcase 'primary':\n\t\t\t\treturn `\n\t\t\t\t\tbackground-color: blue;\n\t\t\t\t\tcolor: white;\n\t\t\t`;\n\t\t\tdefault:\n\t\t\t\treturn `\n\t\t\t\tbackground-color: yellow;\n\t\t\t`;\n\t\t}\n\t};\n\n\treturn (\n\t\t\u003cView\n\t\t\tbackgroundColor=\"#eee\"\n\t\t\tpadding={20}\n\t\t\tcss={css`\n\t\t\t\t${variant};\n\t\t\t\t\u0026:hover {\n\t\t\t\t\ttransform: scale(1.2);\n\t\t\t\t}\n\t\t\t`}\n\t\t\u003e\n\t\t\tHello\n\t\t\u003c/View\u003e\n\t);\n}\n```\n\n### `css` prop\n\n`\u003cView /\u003e` accepts a special `css` prop, which allows you to write styles, just like the [css prop](https://emotion.sh/docs/css-prop#string-styles) or [styled component](https://emotion.sh/docs/styled#styling-elements-and-components) from Emotion.\n\n```jsx\nimport React from 'react';\nimport { View } from 'styled-view';\n\nfunction Example() {\n\tconst css = `\n\t\t\u0026:hover {\n\t\t\tbackground-color: blue;\n\t\t\tcolor: white;\n\t\t}\n\n\t\t@media (min-width: 768px) {\n\t\t\tpadding: 40px;\n\t\t}\n\t`;\n\n\treturn (\n\t\t\u003cView backgroundColor=\"#eee\" padding={20} css={css}\u003e\n\t\t\tHello\n\t\t\u003c/View\u003e\n\t);\n}\n```\n\n### `sx` prop\n\n`\u003cView /\u003e` accepts a special `sx` prop, which allows you to write style objects.\n\n```jsx\nimport React from 'react';\nimport { View } from 'styled-view';\n\nfunction Example() {\n\treturn \u003cView sx={{ backgroundColor: 'pink', padding: 20 }}\u003eHello\u003c/View\u003e;\n}\n```\n\n### Mixins\n\n`\u003cView /\u003e` can render mixins (`function`) when passed into the `css` function. This enables integration with libraries like [Styled Systems](https://github.com/styled-system/styled-system). It also enable you to add your very own custom mixins!\n\n```jsx\nimport React from 'react';\nimport { space, layout, typography, color } from 'styled-system';\nimport { css, View } from 'styled-view';\n\n// Add styled-system functions to your component\nfunction Box(props) {\n\treturn (\n\t\t\u003cView\n\t\t\t{...props}\n\t\t\tcss={css`\n\t\t\t\t${space};\n\t\t\t\t${layout};\n\t\t\t\t${typography};\n\t\t\t\t${color};\n\t\t\t`}\n\t\t/\u003e\n\t);\n}\n\nfunction Example() {\n\treturn (\n\t\t\u003cBox p={4} bg=\"#ddd\" borderRadius={8}\u003e\n\t\t\tHello\n\t\t\u003c/Box\u003e\n\t);\n}\n```\n\nThis concepts was inspired by [James Newell](https://github.com/jameslnewell) ❤️!\n\n### Theming\n\nTheming `\u003cView /\u003e` works as specified by [Emotion Theming](https://emotion.sh/docs/theming).\n\n```jsx\nimport React from 'react';\nimport { ThemeProvider } from 'emotion-theming';\nimport { View } from 'styled-view';\n\nconst theme = {\n\tfontFamily: 'arial',\n};\n\nfunction Example() {\n\treturn (\n\t\t\u003cThemeProvider theme={theme}\u003e\n\t\t\t\u003cView\u003eHello\u003c/View\u003e\n\t\t\u003c/ThemeProvider\u003e\n\t);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fstyled-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fstyled-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fstyled-view/lists"}