{"id":19416682,"url":"https://github.com/aribouius/react-themed","last_synced_at":"2025-04-24T13:32:53.093Z","repository":{"id":57346328,"uuid":"85787609","full_name":"aribouius/react-themed","owner":"aribouius","description":"A flexible library for styling React components","archived":false,"fork":false,"pushed_at":"2019-04-05T19:18:00.000Z","size":105,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-19T00:16:38.661Z","etag":null,"topics":["composition","context-theme","css","css-modules","jss","prop-theme","react","react-theme","react-theming","styled-components","theme","theme-composition","theme-hoc","theme-provider","theming"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aribouius.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-03-22T05:13:31.000Z","updated_at":"2020-02-12T20:56:45.000Z","dependencies_parsed_at":"2022-09-19T11:50:32.581Z","dependency_job_id":null,"html_url":"https://github.com/aribouius/react-themed","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aribouius%2Freact-themed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aribouius%2Freact-themed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aribouius%2Freact-themed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aribouius%2Freact-themed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aribouius","download_url":"https://codeload.github.com/aribouius/react-themed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223888356,"owners_count":17220084,"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":["composition","context-theme","css","css-modules","jss","prop-theme","react","react-theme","react-theming","styled-components","theme","theme-composition","theme-hoc","theme-provider","theming"],"created_at":"2024-11-10T13:03:44.354Z","updated_at":"2024-11-10T13:03:45.210Z","avatar_url":"https://github.com/aribouius.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-themed\nA flexible library for styling React components. Intended for projects using global CSS, [JSS](https://github.com/cssinjs/jss), [CSS Modules](https://github.com/css-modules/css-modules), or any other [CSS in JS](https://github.com/MicheleBertoli/css-in-js) based library that compiles CSS classname objects.\n\n[![Travis](https://img.shields.io/travis/rust-lang/rust.svg?style=flat-square)](https://github.com/aribouius/react-themed)\n[![npm](https://img.shields.io/npm/v/react-themed.svg?style=flat-square)](https://www.npmjs.com/package/react-themed)\n[![npm](https://img.shields.io/npm/l/express.svg?style=flat-square)]()\n\n## Documentation\n- [Features](#features)\n- [Installation](#installation)\n- [Terminology](#terminology)\n- [Basic Usage](#basic-usage)\n- [Theme Composition](#theme-composition)\n- [Context Themes](#context-themes)\n- [API Reference](#api-reference)\n\n***\n\n## Features\n- A [higher-order](https://facebook.github.io/react/docs/higher-order-components.html) React component for injecting and customizing styles.\n- A [provider](https://medium.com/@bloodyowl/the-provider-and-higher-order-component-patterns-with-react-d16ab2d1636) component for supplying context themes.\n- Tools for theme composition and transformation.\n\n***\n\n## Installation\nInstall the stable version:\n```bash\n$ npm i --save react-themed\n```\n***\n\n## Terminology\n##### _`theme`_\nA plain object containing CSS classnames used by one or more React components.\n\n##### _`theme composition`_\nThe merging of two or more theme objects, where values for overlapping keys are concatenated.\n```javascript\nconst theme1 = { list: 'list', item: 'list-item' }\nconst theme2 = { list: 'list-inline' }\n\ncompose(theme1, theme2)\n// =\u003e { list: 'list list-inline', item: 'list-item' }\n```\n\n***\n\n## Basic Usage\nThe HOC provided by `react-themed` can be used as a ES7 decorator, or a curried function. It allows you to inject themes into a React component (as a prop), customize themed components, and configure the wrapping component.\n\n#### Use ES7 decorator\n```javascript\nimport themed from 'react-themed'\nimport styles from './Button.css'\n\n@themed(styles)\n\nexport default ({ theme, ...props }) =\u003e (\n  \u003cbutton {...props} className={theme.button} /\u003e\n)\n```\n\n#### Use curried function\n```javascript\nimport themed from 'react-themed'\nimport styles from './Button.css'\n\nconst Button = ({ theme, ...props }) =\u003e (\n  \u003cbutton {...props} className={theme.button} /\u003e\n)\n\nexport default themed(styles)(Button)\n```\n\n#### Configure wrapping component\n```javascript\nimport themed from 'react-themed'\nimport styles from './Button.css'\n\n@themed(styles, {\n  pure: true, // extend PureComponent\n  propName: 'classes', // customize the prop name, defaults to \"theme\"\n})\n\nexport default ({ classes, ...props }) =\u003e (\n  \u003cbutton {...props} className={classes.button} /\u003e\n)\n```\n\n***\n\n## Theme Composition\nThemes can be composed in the following ways:\n\n#### Compose theme objects\n```javascript\nimport { compose } from 'react-themed'\nimport defaultStyles from './Button.css'\nimport primaryStyles from './ButtonPrimary.css'\n\nexport default compose({}, defaultStyles, primaryStyles)\n```\n\n#### Compose components\n```javascript\nimport themed from 'react-themed'\nimport defaultStyles from './Button.css'\nimport primaryStyles from './ButtonPrimary.css'\n\nconst Button = ({ theme, ...props }) =\u003e (\n  \u003cbutton {...props} className={theme.button} /\u003e\n)\n\nconst Default = themed(defaultStyles)(Button)\nconst Primary = themed(primaryStyles)(Default)\n```\n\n#### Compose during render\n```javascript\nimport themed from 'react-themed'\nimport Button from './Button'\nimport styles from './Form.css'\n\nconst buttonStyles = {\n  button: styles.button,\n}\n\nexport default props =\u003e (\n  \u003cform className={styles.form}\u003e\n    \u003cButton theme={buttonStyles}\u003eSubmit\u003c/Button\u003e\n  \u003c/form\u003e\n)\n```\n\n#### Customize theme (e.g. for regular merging)\n```javascript\nimport themed from 'react-themed'\nimport Button from './Button'\nimport primaryStyles from './ButtonPrimary.css'\n\nexport default themed(prevStyles =\u003e ({\n  ...prevStyles,\n  ...primaryStyles,\n}))(Button)\n```\n\n***\n\n## Context Themes\nWhile this library does not require a specific shape for context theme objects, the following tend to work well:\n\n```javascript\n// Flat\nconst theme = {\n  Button: 'button',\n  Button_primary: 'button-primary'\n}\n\n// Nested\nconst theme = {\n  Button: {\n    button: 'button',\n    primary: 'button-primary',\n  },\n}\n```\n\n#### Activate a context theme\n```javascript\nimport { ThemeProvider } from 'react-themed'\n\nconst App = props =\u003e (\n  \u003cThemeProvider theme={props.theme} /\u003e\n    {props.children}\n  \u003c/ThemeProvider\u003e\n)\n```\n\n#### Apply a context theme\n```javascript\nimport themed from 'react-themed'\n\nconst Button = ({ theme, ...props }) =\u003e (\n  \u003cbutton {...props} className={theme.Button} /\u003e\n)\n\n// select entire context theme\nthemed('*')(Button)\n\n// select single classname (or nested theme)\nthemed('Button')(Button)\n\n// select multiple classnames\nthemed(['Button', 'Button_primary'])(Button)\n\n// select all classnames starting with \"Button\"\nthemed(/^Button/)(Button)\n```\n\n#### Customize context themes\n```javascript\nimport themed from 'react-themed'\nimport styles from './Button.css'\n\n@themed((prevTheme, contextTheme) =\u003e ({\n  ...contextTheme.Button,\n  ...styles,\n}))\n\nexport default ({ theme, ...props }) =\u003e (\n  \u003cbutton {...props} className={theme.button} /\u003e\n)\n```\n\n***\n\n## API Reference\n#### `\u003cThemeProvider theme [compose]\u003e`\nAdds theme to a React component context, making it available to `themed()` calls.\n- `theme` \\(*Object|Function*): Can be either a theme object, or a function that receives a previously added theme, and is expected to return the final theme to use.\n- `compose` \\(*Bool*): Indicates whether the theme should be composed with previously added themes (does not apply to function themes). Defaults to `true`.\n\n#### `themed([theme], [options])`\nCreates a new HOC for generating a `Themed` component.\n- `theme` \\(*Object|String|Array|Function*): The theme to bind to the component.  Can be either a plain object, a string/array for selecting context theme(s), or a function that receives the previously assigned theme (if any) and context theme (if any), and is expected to return the final theme to use.\n- `options` \\(*Object*): Configures the default options for the `Themed` component.\n  - `propName` \\(*String*): The name of the prop that receives the theme, defaults to `theme`.\n  - `pure` \\(*Bool*): Indicates the component should inherit from `PureComponent`.\n  - `compose` \\(*Func*): Specifies the default function to use when composing themes.\n  - `mergeProps(ownProps, themeProps): props` \\(*Function*): If specified, it is passed the parent props and theme props, and is expected to return a merged object to pass as props to the wrapped component.\n\n#### `themed.extend(options)`\nCreates a new `themed` function that uses a customized set of default options when generating themed components.\n- `options` \\(*Object*): The options to merge into the previous default options.\n\n#### `\u003cThemed [theme] [childRef]\u003e`\nThe *themed* component created by the `themed` decorator.\n- `theme` \\(*Object|String|Array|Function*): A theme or context theme (selector) that should be composed with the previous theme, or a function that customizes the previous theme.  \n- `childRef` \\(Function*): Specifies a [ref](https://facebook.github.io/react/docs/refs-and-the-dom.html) callback function to pass to the wrapped component.\n\n#### `compose(target, ...themes)`\nRecursively merges theme objects by concatenating values for overlapping keys, and copies result into a target object.\n\n***\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faribouius%2Freact-themed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faribouius%2Freact-themed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faribouius%2Freact-themed/lists"}