react-cx - Combine styles from CSS Modules with a `cx` prop.

  •        215

Inspired by jareware/css-ns. Uses jedwatson/classnames under the hood. When styling components with CSS modules, you'll often need join multiple class names together before passing them to the React className prop.

https://github.com/jamesknelson/react-cx

Dependencies:

classnames : ^2.2.5

Tags
Implementation
License
Platform

   




Related Projects

native-css - Convert pure CSS to React Style or javascript literal objects.

  •    Javascript

Convert pure CSS to javascript literal objects or React Style. 'Cause of this, all ids and inheritance relationships are converted to classes.

react-native-style-tachyons - Better styling for React Native

  •    Javascript

React Native Style Tachyons brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention. More about the advantages of this approach. Of course you can use your old styles along tachyons' classes.

react-native-css - Style React-Native components with css

  •    Javascript

React-native-css turns valid CSS into the Facebook subset of CSS. if you still want access to the the old implementation, please check v1 branch.


jsxstyle - Inline style system for React and Preact

  •    Javascript

This repository is the monorepo for runtime versions jsxstyle as well as a few tools designed to be used with jsxstyle. jsxstyle is an inline style system for React and Preact. It provides a best-in-class developer experience without sacrificing performance, and has little regard for existing CSS orthodoxy.

theme - Style your React Native components on one place

  •    Javascript

The React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code. @shoutem/theme is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web. All the documentation is available on the Developer portal.

style-dictionary - A build system for creating cross-platform styles.

  •    Javascript

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

react-jss - JSS integration for React.

  •    Javascript

React-JSS provides components for JSS as a layer of abstraction. JSS and the default preset are already built in! Try it out in the playground. React-JSS wraps your component with a higher-order component. It injects a classes prop, which is a simple map of rule names and generated class names. It can act both as a simple wrapping function and as an ES7 decorator.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design

  •    Javascript

@material-tailwind is an easy to use components library for Tailwind CSS and Material Design. It features multiple React components, all written with Tailwind CSS classes and Material Design guidelines. Coming soon components for VueJS, Angular and many more. Add this repository to your watch list to get the latest news, or join our newsletter community: https://material-tailwind.com/. Import the tailwind.css into your app.js file. Make sure to import the tailwind.css style sheet after all other style sheets.

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).

react-animations - A collection of animations for inline style libraries

  •    Javascript

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.Check out the interactive demo.

react-video - 🎞 React component to load video from Vimeo or Youtube across any device.

  •    Javascript

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an <iframe> is rendered from browser, it blocks its parse because it isn't a non-blocking script. This isn't so good to your user, no?. With this react component, the <iframe> just will be loaded when the user click on play. NOTICE: You need just one thing to make the component work. Put the base component style at the <header> tag. If you don't wanna use the .css extension, you can get the .styl or .scss extension at the folder ./lib.

glamorous-native - React Native component styling solved💄

  •    Javascript

glamorous for React Native. React component styling solved with an elegant (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs. In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.

notus-react - Notus React: Free Tailwind CSS UI Kit and Admin

  •    Javascript

Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let Notus React amaze you with its cool features and build tools and get your project to a whole new level. Notus React is Free and Open Source. It features multiple HTML and React elements and it comes with dynamic components for React.

postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS

  •    Javascript

PostCSS for React Inline Styles, Radium, JSS and other CSS-in-JS.For example, to use Stylelint, RTLCSS or postcss-write-svg plugins in your workflow.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

element-react - Element UI

  •    Javascript

Element was initially written in Vue, which has many elegant UI components, but we also love React, so we forked it for the React community.Before the building, you need a style theme, here we recommend you to pick up element-theme-default.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.