{"id":14384897,"url":"https://github.com/jxnblk/axs","last_synced_at":"2025-04-13T18:22:31.179Z","repository":{"id":67375937,"uuid":"73346948","full_name":"jxnblk/axs","owner":"jxnblk","description":"Stupid simple style components for React","archived":false,"fork":false,"pushed_at":"2018-02-04T15:30:19.000Z","size":1129,"stargazers_count":209,"open_issues_count":7,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T09:06:58.814Z","etag":null,"topics":["component","css","css-in-js","react","style","stylis"],"latest_commit_sha":null,"homepage":"https://jxnblk.com/axs/","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/jxnblk.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-10T04:23:49.000Z","updated_at":"2025-02-07T09:33:19.000Z","dependencies_parsed_at":"2023-03-13T20:28:53.071Z","dependency_job_id":null,"html_url":"https://github.com/jxnblk/axs","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Faxs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Faxs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Faxs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Faxs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/axs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248759135,"owners_count":21157096,"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","react","style","stylis"],"created_at":"2024-08-28T18:01:45.800Z","updated_at":"2025-04-13T18:22:31.146Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# Axs\n\nStupid simple style components for React\n\nIf you know React and you know CSS, you already know how to use this.\n\n[![Build Status][badge]][travis]\n\n[badge]: https://img.shields.io/travis/jxnblk/axs/master.svg?style=flat-square\n[travis]: https://travis-ci.org/jxnblk/axs\n\n\u003cimg src='docs/logo.png?raw=true' width='256' height='256' /\u003e\n\n```sh\nnpm i axs\n```\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      color: tomato;\n    `}\n  /\u003e\n```\n\n\u003e A hand axe is a prehistoric stone tool... the longest-used tool in human history.\n\n## Features\n\n- Minimal API surface area\n- One component, three props\n- React component-based API\n- Server side rendering with no additional setup\n- No custom Babel plugins or additional configuration needed\n- Works in iframes\n- 0.7 kb in under 100 LOC\n\n## Usage\n\n### Basic\n\nCreate components by wrapping the Base component and passing props and a `css` prop to add style.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase\n    {...props}\n    css={`\n      color: tomato;\n    `}\n  /\u003e\n```\n\n### CSS syntax\n\nThe `css` prop uses [stylis][stylis] for a CSS-like syntax that allows pseudo-classes, media queries, animations, and nested selectors to be defined inline.\nSee the [stylis docs][stylis] for more info.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase\n    {...props}\n    css={`\n      color: tomato;\n      \u0026:hover {\n        color: black;\n      }\n    `}\n  /\u003e\n```\n\n### HTML elements\n\nTo change the underlying HTML element, pass a tag name to the `is` prop.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase\n    is='h1'\n    {...props}\n    css={`\n      color: tomato;\n    `}\n  /\u003e\n```\n\nAlternatively, the Base component is decorated with keys for all valid HTML elements, which map to the `is` prop.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase.h1\n    {...props}\n    css={`\n      color: tomato;\n    `}\n  /\u003e\n```\n\nWhen using the component, the underlying element can be changed on a per-instance basis using the `is` prop.\nThis is especially helpful for ensuring the use of correct HTML semantics, while keeping the component styles decoupled.\n\n```jsx\n\u003cHeading is='h2'\u003e\n  Hello\n\u003c/Heading\u003e\n```\n\n### Dynamic styles\n\nStyles can be set dynamically based on props.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      color: ${props.color};\n    `}\n  /\u003e\n```\n\nUsing the component above with a custom `color` passed as a prop would look like this:\n\n```jsx\n\u003cHeading color='tomato'\u003e\n  Hello\n\u003c/Heading\u003e\n```\n\n**Note:** unlike other libraries like [styled-components][styled-components], the `css` prop takes a string, not a tagged template literal, so passing functions into the `css` prop will do nothing.\n\n### Removing style props\n\nTo remove props used for styling from the underlying HTML element, use [destructuring][destructuring] to pick out the props used for styling.\n\n```jsx\nconst Heading = ({ color, ...props }) =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      color: ${color};\n    `}\n  /\u003e\n```\n\n### Styling other components\n\nTo style other components, pass the component to the `is` prop.\n\n```jsx\nconst Link = props =\u003e\n  \u003cBase\n    is={ReactRouter.Link}\n    {...props}\n    css={`\n      color: #07c;\n    `}\n  /\u003e\n```\n\n### Extending components\n\nTo make an Axs component extensible, pass the `css` prop argument to the Base component's `css` prop after the base styles.\n\n```jsx\nconst Heading = ({ css, ...props }) =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      font-size: 32px;\n      ${css}\n    `}\n  /\u003e\n```\n\nTo make an extension from the base Heading component, pass it to the `is` prop.\n\n```jsx\nconst BigHeading = props =\u003e\n  \u003cBase\n    {...props}\n    is={Heading}\n    css={`\n      font-size: 64px;\n    `}\n  /\u003e\n```\n\n### Server side rendering\n\nServer side rendering works without the need for any additional setup.\nThis is because CSS rulesets are created within the Base component,\nwhich then renders an inline `\u003cstyle\u003e` element with the component's CSS.\n\nTo render in Node.js, be sure to use [CommonJS module syntax](https://nodejs.org/api/modules.html) or transpile ES modules to CommonJS syntax with a tool like [Babel](https://babeljs.io).\n\n```js\nconst React = require('react')\nconst { renderToString } = require('react-dom')\nconst Base = require('axs')\n\nconst html = renderToString(\n  React.createElement(Base, {\n    css: `\n      color: tomato;\n    `\n  }, 'Hello')\n)\n```\n\n### Pseudo-classes\n\nSince Axs uses [stylis][stylis] to parse strings to valid CSS,\npseudo-classes can be added to components with a syntax like the following.\nThe `\u0026` refers to the component's generated className.\n\n```jsx\nconst Link = props =\u003e\n  \u003cBase.a\n    {...props}\n    css={`\n      color: #07c;\n      text-decoration: none;\n      \u0026:hover {\n        text-decoration: underline;\n      }\n    `}\n  /\u003e\n```\n\n### Media queries\n\nMedia queries can also be handled inline with [stylis][stylis] syntax.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      font-size: 32px;\n      @media screen and (min-width: 40em) {\n        font-size: 48px;\n      }\n    `}\n  /\u003e\n```\n\n### Animation\n\nCSS animations can also be handled with [stylis][stylis] syntax.\n\n```jsx\nconst Heading = props =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      font-size: 32px;\n      animation-name: pop;\n      animation-timing-function: ease-in;\n      animation-duration: .2s;\n\n      @keyframes pop {\n        0% { transform: scale(.75); }\n        50% { transform: scale(1.125); }\n        100% { transform: scale(1); }\n      }\n    `}\n  /\u003e\n```\n\n### Theming\n\nTheming can be added to any Axs component using the [theming][theming] library.\n\n```jsx\nimport React from 'react'\nimport Base from 'axs'\nimport { withTheme, ThemeProvider } from 'theming'\nimport theme from './theme'\n\nconst Heading = withTheme(({ color, theme, ...props }) =\u003e\n  \u003cBase.h2\n    {...props}\n    css={`\n      color: ${theme.blue};\n    `}\n  /\u003e\n)\n\nconst App = props =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cHeading\u003e\n      Hello\n    \u003c/Heading\u003e\n  \u003c/ThemeProvider\u003e\n)\n```\n\n## API\n\n### Base\n\nThe Base component is a primitive React component that takes CSS as a prop, generates a unique className,\nand renders an inline style element along with the component.\nThe `css` prop takes a string in a CSS-like syntax and uses [stylis][stylis] to create valid CSS rules.\nBy default the Base component renders an HTML `\u003cdiv\u003e` element.\nTo change the underlying HTML element, pass a tag to the `is` prop or use one of the keyed Base components.\n\n```jsx\n\u003cBase\n  is='h2'\n  css='color:tomato;'\n/\u003e\n```\n\n```jsx\n// using a Base component key\n\u003cBase.h2\n  css='color:tomato;'\n/\u003e\n```\n\nProp | Type | Description\n---|---|---\n`css` | String | [stylis][stylis] compatible CSS string to apply to the component\n`is` | String or Component | sets the underlying HTML tag or React component to style\n`innerRef` | Function | callback to get the component's [React ref](https://reactjs.org/docs/refs-and-the-dom.html)\n\n## Motivation\n\nReact provides a powerful, functional API for rendering HTML with JavaScript.\nCreating styles for HTML can follow a similar pattern.\nBy building on top of the React API, Axs is meant to make styling components effortless\nand require as little new syntax as possible.\nWhile other CSS-in-JS libraries add custom factory functions, methods, and additional utilities,\nAxs relies solely on React components and props for its API.\nThe hope is that this makes Axs quicker to learn, easier to use, and more interoperable with the rest of the React ecosystem.\n\nAxs also uses React to render inline style tags rather than adding custom DOM-related code,\nwhich makes using the library for server-side rendering work in the same way other React components do.\nThis also means components can be rendered to other documents, such as in iframes,\nwithout the need for custom APIs or additional functionality.\n\n\n### Related\n\n- [styled-components](https://github.com/styled-components/styled-components)\n- [glamor](https://github.com/threepointone/glamor)\n- [glamorous](https://github.com/paypal/glamorous)\n- [emotion](https://github.com/emotion-js/emotion)\n- [styled-jsx](https://github.com/zeit/styled-jsx)\n- [jsxstyle](https://github.com/smyte/jsxstyle)\n- [styled-system](https://github.com/jxnblk/styled-system)\n- [nano-style](https://github.com/jxnblk/nano-style)\n- [cxs](https://github.com/jxnblk/cxs)\n\n\n[MIT License](LICENSE.md)\n\n[stylis]: https://github.com/thysultan/stylis.js\n[styled-components]: https://github.com/styled-components/styled-components\n[destructuring]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment\n[theming]: https://github.com/cssinjs/theming\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Faxs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Faxs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Faxs/lists"}