{"id":26460018,"url":"https://github.com/creaworks-labs/react-bender","last_synced_at":"2026-04-11T09:04:09.293Z","repository":{"id":57332919,"uuid":"153185244","full_name":"creaworks-labs/react-bender","owner":"creaworks-labs","description":"A powerful style bender for React and ReactNative project.","archived":false,"fork":false,"pushed_at":"2019-04-11T19:29:09.000Z","size":480,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T10:32:53.076Z","etag":null,"topics":["css3","react","react-native","style-bender","styled-components","stylesheet"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/creaworks-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-15T21:39:25.000Z","updated_at":"2020-10-15T07:26:55.000Z","dependencies_parsed_at":"2022-08-24T18:42:09.434Z","dependency_job_id":null,"html_url":"https://github.com/creaworks-labs/react-bender","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creaworks-labs%2Freact-bender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creaworks-labs%2Freact-bender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creaworks-labs%2Freact-bender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creaworks-labs%2Freact-bender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creaworks-labs","download_url":"https://codeload.github.com/creaworks-labs/react-bender/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244227414,"owners_count":20419242,"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":["css3","react","react-native","style-bender","styled-components","stylesheet"],"created_at":"2025-03-19T02:48:02.052Z","updated_at":"2026-04-11T09:04:09.258Z","avatar_url":"https://github.com/creaworks-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Bender](./react-bender-logo.svg)\n\n\n[![NPM](https://img.shields.io/npm/v/react-bender.svg)](https://www.npmjs.com/package/react-bender) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nBender is the only unified way to define and apply styles to your **React** components using **React DOM** structure.\n\n## Install\n\n```bash\nyarn add react-bender\n```\n \n## What is React Bender?\n\nThere are a lot of different approaches exists in the community for styling React components, but there was no unified approach for both* **React** (for Web) and **React Native** hence we invented this powerful library!\n\nWe all know that the **CSS** has lots of problems at scale. [Here](https://speakerdeck.com/vjeux/react-css-in-js) @vjeux already explained the problems mentioned years ago. Today, all the best practices and 3rd party libraries encouraging mostly CSS-in-JS approach. (Please refer to [here](https://github.com/MicheleBertoli/css-in-js).)\n  \nBut conversely, Bender aims to use CSS practices to React and YES! This is yet another styling approach but not in CSS-in-JS way.\n\n\n## Motivation\n\nBender introduces the *CSS-ish* way of defining style rules for React components. Of course, does not inherit problems of CSS into the React world but trying to bring some of the good stuff that you experienced from CSS.\n\n \n### Why *CSS-ish* way of definition?  \n\nAs mentioned above, the CSS already exists in the browser environment but exist with its problems. Open Source Community trying to bring some practices like; **css-modules**, **styled-components** to avoid these issues but all these efforts are not addressing all the problems. A small summary can be found [here](https://survivejs.com/react/advanced-techniques/styling-react/).\n\nOn the other hand, CSS does not exist on the React Native and it has a strict way of defining styles and styling components. Yes, it doesn't have any special language or syntax. You just style you components using plain-old JavaScript. \n\nMost of the time component styles are defined as a static variable along with the component itself. This makes it easy to build self-contained components that always look and behave the same way. At the same time, it complicates building customizable and themable components that could have multiple alternative styles which could be customized without changing the component’s source code.\n\nBender using its own markup to bring a new approach to React component styling. With Bender you can write your components and their styles once and use them on both React \u0026 React Native projects.\n\n## Approach\n\nBender has its own markup but if you are familiar with CSS or SCSS kind of supersets, it makes your job easy. Because you will feel like you are using something you already know.\n\nBender's main idea is to create set of targeted styles based on components and enhance them with additional alternative style combinations if needed.\n\n### Component Specific Styles\nYou can create component styles using `#ComponentName` keyword in Bender stylesheet. Attached component name must start with `#`, must be *unique* in the stylesheet file and has to be defined as **PascalCase**.\n\nComponent styles can contain style definitions with **kebab-case**. These definitions will be default style properties of the matching component. But additionally, alternative styles can be defined as described in the next section.\n\nHere's the basic style definition for a component named `Text`.\n\n```scss\n#Text {\n\tfont-size: 14px;\n\tcolor: 'black';\n}\n```\n\u003e Please note that **Bender !== CSS** but, **Bender == CSS**.\n\u003e It doesn't have the same **CSS** features, rules and selectors but uses **CSS** syntax to define styles. \n\nAfter defining your component styles you should attach this definition to desired React component using `withBenderStyles` HoC. \n\n```javascript\n// Text.js\nimport { Text as RNText } from 'react-native';\nimport { withBenderStyles } from 'react-bender';\n\nexport const Text = withBenderStyles('Text')(RNText)\n```\nThis method will enrich your component and gather definitions named as `Text` inside your stylesheet then pass as `style` property automatically.\n\nFinal component can be used as the example below.\n\n```jsx\n\u003cText\u003eHey! This is a sample text inside a bender styled component.\u003c/Text\u003e\n```\n\n### Alternative Styles\nAlternative styles are the coolest way to add additional style flavours to your components using `styleName` property of your target react component.\n\n```scss\n#Text {\n\tfont-size: 14px;\n\tcolor: 'black';\n\t\n\t// Alternate 1\n\t.bold {\n\t\tfont-weight: 'bold';\n\t}\n\t\n\t// Alternate 2\n\t.underline {\n\t\ttext-decoration: underline;\n\t}\n}\n```\n\u003e These style definitions must always be wrapped with a **component style** definition.\n\nAlternate style definitions must be start with `.` and can contain nested alternative styles. Also, Bender has style cascading and nesting support. You can define a specific alternate rule to apply when you nest your components using React DOM.\n\nThere are **two** different ways to specify alternative styles to a Bender styled component. \n\nFirst option would be passing desired alternate definition name into the `styleName` prop of your React component.\n\n```jsx\n\u003cText styleName=\"bold\"\u003eHey! This is a inside a bender styled component.\u003c/Text\u003e\n```\nIf you are nesting your components, nested component will inherit styles resolved by super's `styleName` props. At the example; you should see the whole as **bold** and just `sample text` section **bold** and **italic** styled.\n```jsx\n\u003cText styleName=\"bold\"\u003eHey! This is a \u003cText styleName=\"italic\"\u003esample text\u003c/Text\u003e inside a bender styled component.\u003c/Text\u003e\n```\n\u003e `styleName` property can be a string or array of strings. If you want to pass multiple modifiers into a component, you can use *array* approach or use *string* with *spaces* between each modifier style names.\n\n\n### Rules Specificity\n\nSpecificity is basically a measure of how specific a rule definition is. \n\nThe amount of specificity a rule has is measured using four different values, which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:\n\n|Rule|Thousands|Hundreds|Tens|Ones|Total Specificity|\n|--------|---------|--------|----|----|-----------------|\n| ```#ComponentName {...}``` |0|0|0|1|1|\n|```.styleName {...}```|0|0|5|0|50|\n| No rule, with an inline style over element's `style` property |1|0|0|0|1000|\n\n\n## How does it work?\n\n- PostCSS\n\n- Babel Plugin\n\n- Metro Bundler\n\n- Webpack Loader\n\n## Performance  \n\nProcessing on both compile time and runtime.\n\n\n## License\n\nMIT © [omerduzyol](https://github.com/omerduzyol)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreaworks-labs%2Freact-bender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreaworks-labs%2Freact-bender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreaworks-labs%2Freact-bender/lists"}