{"id":27399642,"url":"https://github.com/malpaux/react-typestyle","last_synced_at":"2025-04-14T03:20:14.034Z","repository":{"id":57346840,"uuid":"97224399","full_name":"Malpaux/react-typestyle","owner":"Malpaux","description":"A react integration of the TypeStyle ecosystem","archived":false,"fork":false,"pushed_at":"2018-02-10T14:03:05.000Z","size":143,"stargazers_count":4,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:25:31.260Z","etag":null,"topics":["inline-css","react","typestyle"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Malpaux.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":"2017-07-14T10:53:52.000Z","updated_at":"2019-06-02T22:33:22.000Z","dependencies_parsed_at":"2022-08-25T19:40:20.916Z","dependency_job_id":null,"html_url":"https://github.com/Malpaux/react-typestyle","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malpaux%2Freact-typestyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malpaux%2Freact-typestyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malpaux%2Freact-typestyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malpaux%2Freact-typestyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Malpaux","download_url":"https://codeload.github.com/Malpaux/react-typestyle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813991,"owners_count":21165656,"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":["inline-css","react","typestyle"],"created_at":"2025-04-14T03:20:13.344Z","updated_at":"2025-04-14T03:20:14.005Z","avatar_url":"https://github.com/Malpaux.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React integration of TypeStyle\n\n[![wercker status](https://app.wercker.com/status/82d78fe58e6950eaf9236372ba412372/s/master \"wercker status\")](https://app.wercker.com/project/byKey/82d78fe58e6950eaf9236372ba412372)\n\nReact-TypeStyle provides a higher-order component to easily use [TypeStyle](http://typestyle.io/#/) to style your React components. It automatically handles dynamic style updates, caching and deduping across all components.\n\n\n## Install\n\nusing [yarn](https://yarnpkg.com/en/)\n```shell\nyarn add react-typestyle\n```\n\nor npm\n```shell\nnpm install --save react-typestyle\n```\n\n## Usage\nJust add a static ```styles``` field to your React component and wrap it in the ```withStyles``` higher-order component. You can now access generated class names via ```props.classNames```.\n\n### Example\n#### TypeScript\n```typescript\nimport withStyles, { InjectedProps, InputSheet } from 'react-typestyle';\n\ninterface Props {\n  name: string;\n  pos: { x: number, y: number };\n  theme: { color: string };\n}\n\nclass Component extends React.PureComponent\u003cProps \u0026 InjectedProps\u003e {\n  public static styles: InputSheet\u003cProps\u003e = {\n    button: {\n      background: 'transparent',\n      border: 'none',\n    },\n    root: (props) =\u003e ({\n      color: props.theme.color,\n      position: 'absolute',\n      transform: `translate(${props.pos.x}px,${props.pos.y}px)`,\n    }),\n  };\n\n  public render() {\n    const { classNames, name } = this.props;\n    return (\n      \u003cdiv className={classNames.root}\u003e\n        \u003cbutton className={classNames.button}\u003e{name}\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default withStyles()\u003cProps\u003e(Component);\n```\n\n#### JavaScript\n```javascript\nimport withStyles from 'react-typestyle';\n\nclass Component extends React.PureComponent {\n  static styles = {\n    button: {\n      background: 'transparent',\n      border: 'none',\n    },\n    root: (props) =\u003e ({\n      color: props.theme.color,\n      position: 'absolute',\n      transform: `translate(${props.pos.x}px,${props.pos.y}px)`,\n    }),\n  };\n\n  render() {\n    const { classNames, name } = this.props;\n    return (\n      \u003cdiv className={classNames.root}\u003e\n        \u003cbutton className={classNames.button}\u003e{name}\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default withStyles()(Component);\n```\n\n### Stateless Components\n#### TypeScript\n```typescript\nimport withStyles, { InjectedProps, StyledStatelessComponent } from 'react-typestyle';\n\ninterface Props {\n  name: string;\n  pos: { x: number, y: number };\n  theme: { color: string };\n}\n\nconst Component: StyledStatelessComponent\u003cProps\u003e = ({ classNames, name }) =\u003e (\n  \u003cdiv className={classNames.root}\u003e\n    \u003cbutton className={classNames.button}\u003e{name}\u003c/button\u003e\n  \u003c/div\u003e\n);\n\nComponent.styles = {\n  button: {\n    background: 'transparent',\n    border: 'none',\n  },\n  root: (props) =\u003e ({\n    color: props.theme.color,\n    position: 'absolute',\n    transform: `translate(${props.pos.x}px,${props.pos.y}px)`,\n  }),\n};\n\nexport default withStyles()\u003cProps\u003e(Component);\n```\n\n#### JavaScript\n```javascript\nimport withStyles from 'react-typestyle';\n\nconst Component = ({ classNames, name }) =\u003e (\n  \u003cdiv className={classNames.root}\u003e\n    \u003cbutton className={classNames.button}\u003e{name}\u003c/button\u003e\n  \u003c/div\u003e\n);\n\nComponent.styles = {\n  button: {\n    background: 'transparent',\n    border: 'none',\n  },\n  root: (props) =\u003e ({\n    color: props.theme.color,\n    position: 'absolute',\n    transform: `translate(${props.pos.x}px,${props.pos.y}px)`,\n  }),\n};\n\nexport default withStyles()(Component);\n```\n\n### Options\nYou can pass in general options and options specific to the wrapped component.\n\n```javascript\nwithStyles(options)(Component, componentOptions)\n```\n\n#### ```options```\n- ```plugins?: Array\u003c(style: { [property: string]: any }, type: string, renderer: any, props?: { [key: string]: any }) =\u003e { [property: string]: any }\u003e```  \nPlugins for further style transformations. The plugin API is compatible with most [Fela](http://fela.js.org/#) plugins, e.g. [```fela-plugin-prefixer```](https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-prefixer)\n\n- ```renderer: Registry```  \nA registry instance the component's styles will be mounted to. Defaults to a global ```Renderer``` instance\n\n- ```shouldStylesUpdate: \u003cProps\u003e(props: Props, nextProps: Props) =\u003e boolean```  \nUsed to check whether styles should to be rerendered. Defaults to a shallow comparison of next and current props\n\n#### ```componentOptions```\n- ```styles: InputSheet\u003cProps\u003e```  \nAlternative style sheet, overwrites ```styles``` field of wrapped component\n\n### Server Side Rendering\nJust like TypeStyle itself, React-TypeStyle can easily be used for server side rendering.\n\n```javascript\nimport { getStyles } from 'react-typestyle';\n\n// Render the react app...\n\n// Render to CSS style tag\nconst styleTag = `\u003cstyle\u003e${getStyles()}\u003c/style\u003e`\n// ^ send this as a part of your HTML response\n```\n\n*Note: As React-TypeStyle uses a custom renderer under the hood, you can not use TypeStyle's ```getStyles()``` function.*\n\n### Utilities\n\n#### Dynamic Extend\nIf you are using dynamic styles (your stylesheet includes functions), TypeStyle's standard ```extend``` won't work for you.  \nIf you want to compose dynamic styles, use React-TypeStyle's dynamic ```extend``` instead.\n\n```javascript\nimport { extend } from 'react-typestyle';\n\n// Compose styles\nconst styles = extend(\n  ({ background }) =\u003e ({ background }),\n  { color: '#fff' },\n  () =\u003e ({}),\n);\n\n// Use them in the higher-order component\nclass Component extends React.PureComponent {\n  static styles = {\n    root: styles,\n  };\n\n  render() {/* ... */}\n}\n```\n\n## Developing\n\nThis is what you do after you have cloned the repository:\n\n```shell\nyarn / npm install\nnpm run build\n```\n\n(Install dependencies \u0026 build the project.)\n\n### Linting\n\nExecute TSLint\n\n```shell\nnpm run lint\n```\n\nTry to automatically fix linting errors\n```shell\nnpm run lint:fix\n```\n\n### Testing\n\nExecute Jest unit tests using\n\n```shell\nnpm test\n\nnpm run test:coverage\n```\n\nTests are defined in the same directory the module lives in. They are specified in '[module].test.js' files.\n\n### Building\n\nTo build the project, execute\n\n```shell\nnpm run build\n```\n\nThis saves the production ready code into 'dist/'.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalpaux%2Freact-typestyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalpaux%2Freact-typestyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalpaux%2Freact-typestyle/lists"}