GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → brunolemos → react-native-css-in-js-benchmarks

brunolemos / react-native-css-in-js-benchmarks

Licence: other
CSS in JS Benchmarks for React Native

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Labels

benchmarkreact-nativestyled-componentscss-in-jsfelaglamorous

Projects that are alternatives of or similar to react-native-css-in-js-benchmarks

Css In Js Benchmarks
Stars: ✭ 360 (+682.61%)
Mutual labels:  benchmark, styled-components, css-in-js
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: ✭ 52 (+13.04%)
Mutual labels:  styled-components, fela, glamorous
Glamorous
DEPRECATED: 💄 Maintainable CSS with React
Stars: ✭ 3,681 (+7902.17%)
Mutual labels:  styled-components, css-in-js, glamorous
Arc
React starter kit based on Atomic Design
Stars: ✭ 2,780 (+5943.48%)
Mutual labels:  styled-components, css-in-js
Awesome Styled Components
A curated list of awesome styled-components resources 💅
Stars: ✭ 2,869 (+6136.96%)
Mutual labels:  styled-components, css-in-js
Styled Props
Simple lib that allows you to set styled props in your styled-components without stress.
Stars: ✭ 247 (+436.96%)
Mutual labels:  styled-components, css-in-js
Css In Js
Autocomplete React Native / JS Styles and converting plain CSS to JS styles
Stars: ✭ 192 (+317.39%)
Mutual labels:  styled-components, css-in-js
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (+13.04%)
Mutual labels:  styled-components, css-in-js
tailed
Tailed is a tiny lib to add styled-components syntax like, with suport to conditional classes.
Stars: ✭ 79 (+71.74%)
Mutual labels:  styled-components, css-in-js
linaria-styled
Zero-runtime CSS in JS library for building React components
Stars: ✭ 17 (-63.04%)
Mutual labels:  styled-components, css-in-js
mugiwara
fast minimal CSS-in-JS created to reduce size of CSS injected
Stars: ✭ 11 (-76.09%)
Mutual labels:  styled-components, css-in-js
Styled Ppx
Typed styled components in Reason, OCaml and ReScript
Stars: ✭ 236 (+413.04%)
Mutual labels:  styled-components, css-in-js
Styled Email Components
💌 styled-components for emails
Stars: ✭ 231 (+402.17%)
Mutual labels:  styled-components, css-in-js
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: ✭ 204 (+343.48%)
Mutual labels:  styled-components, css-in-js
mediocre-pictures
Helping you take mediocre pictures, hands-free. 📷🙆🏻🙅🏾💁🏼📸
Stars: ✭ 16 (-65.22%)
Mutual labels:  styled-components, css-in-js
styled-components-docs-zh
💅 styled-components 中文文档翻译 🏇持续施工中
Stars: ✭ 160 (+247.83%)
Mutual labels:  styled-components, css-in-js
stylelint-processor-glamorous
💄 Lint glamorous and related css-in-js with stylelint
Stars: ✭ 18 (-60.87%)
Mutual labels:  css-in-js, glamorous
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+4419.57%)
Mutual labels:  styled-components, css-in-js
Styled Theme
Extensible theming system for styled-components 💅
Stars: ✭ 183 (+297.83%)
Mutual labels:  styled-components, css-in-js
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components — Standard size from Chrome DevTools.
Stars: ✭ 33 (-28.26%)
Mutual labels:  styled-components, css-in-js
View All Similar Projects ➔

CSS in JS Benchmarks

for React Native

Results

See RESULTS.md for the benchmark results.

Technique

  • Big table with random data and dynamic background color opacity
  • Multiple implementations for each lib with small variations, e.g. using inline styles or not
  • Multiple rerenders are executed per test and the result is their average render time

React Native running CSS in JS benchmarks on iOS simulator

Libs

Know any other? Please open an issue or, preferrably, a pull request :)

Inspiration

The idea and some code pieces are heavily inspired by A-gambit/CSS-IN-JS-Benchmarks, which benchmarks were made for React Web.

How to run

  • Run git clone [email protected]:brunolemos/react-native-css-in-js-benchmarks.git
  • Run yarn or npm install

Manually

  • Run react-native run-ios
  • Use the app as usual

Automatically

  • Run brew tap wix/brew
  • Run brew install applesimutils
  • Start the iPhone X Simulator
  • Run npm run test:e2e:build
  • Run npm run test:e2e

Detox will run all benchmarks and show the results at the end.

Author

Bruno Lemos (follow @brunolemos on twitter)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].