react-styling-demo - Demos for react-animate, react-css and other React styling demos.

  •        3

For a while now, I've been a React enthusiast. However, almost every React code I had a chance to read was either very small examples from the contributors repos or contrived cases or butchery to forcefeed React into AngularJS apps. Most of the real-life examples of React usage I've seen resolve to using getDOMNode() to interoperate with JS DOM libs, such as jQuery, which kind of defeats the whole purpose of using React in the first place: working only on a virtual DOM, never touch the real DOM, and let the framework optimize the actual DOM mutations.

https://github.com/elierotenberg/react-styling-demo

Dependencies:

grunt-contrib-uglify : ^0.5.1
lodash : ^2.4.1
react : ^0.11.1
react-animate : ^0.1.2
react-css : 0.0.2

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

Radium - A toolchain for React component styling

  •    Javascript

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.

react-native-extended-stylesheet - Extended StyleSheets for React Native

  •    Javascript

Drop-in replacement of React Native StyleSheet with media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff.Global variables are passed to EStyleSheet.build() and available in all stylesheets.


react-native-styling-cheat-sheet - Most of the React Native styling material in one page

  •    

Most of the React Native styling material in one page. Imported from the official docs.

react-native-render-html - iOS/Android pure javascript react-native component that renders your HTML into 100% native views

  •    Javascript

An iOS/Android pure javascript react-native component that renders your HTML into 100% native views. It's made to be extremely customizable and easy to use and aims at being able to render anything you throw at it. Based on the original work of Thomas Beverley, props to him.

formsy-react-components - A set of React JS components for use in a formsy-react form

  •    Javascript

formsy-react-components is a selection of React components that render form elements for use in a formsy-react form. The components render markup to be quickly included in a Bootstrap 3 form. This includes a <label>, help text, and some validation styling tied to formsy’s validation state and validation messages.

apollo-universal-starter-kit - Apollo 2 Universal Starter Kit — GraphQL React JavaScript app boilerplate for Mobile, Server and Web where code for all platforms built with Webpack to enable max code reuse, stack: Apollo, GraphQL, React 16, React Native, Expo, Express, Knex, SQLite, Twitter Bootstrap, Babel, Webpack

  •    Javascript

Apollo Universal Starter Kit is a SEO friendly boilerplate for Universal Mobile and Web app development built on top of Apollo, GraphQL, React 16, React Native, Expo, Redux, Express with SQL storage support, for styling Twitter Bootstrap, NativeBase and Ant Design integration. Hot Code Reload of back end & front end using Webpack and Hot Module Replacement to reflect your changes instantly and help you stay productive. This starter kit adds full React Native integration, with Webpack as a packager and Expo. No native code compilation tools are needed in order to develop native mobile applications with this kit. You are able to run both web and mobile versions of your app at the same time connected to the same backend.

react-portal - React component for transportation of modals, lightboxes, loading bars

  •    Javascript

Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its children into it. That's necessary for proper styling (especially positioning). Looking for v3 documentation? Go here.

ReactNativeKatas - This is a project that lets you participate in a fully-immersive, hands-on, and fun learning experience for React Native

  •    Javascript

This is a project that lets you participate in a fully-immersive, hands-on, and fun learning experience for React Native. We will focus solely about design and styling for React Native, making this a perfect learning aid for both programmers and designers that previously handled Sass or CSS.

react-isomorphic-video-game-search - An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API

  •    Javascript

An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API. An excuse to share my research and get feedback as I prepare to launch a large React-powered app.

react-lz-editor - A multilingual react rich-text editor component includes media support such as texts, images, videos, audios, links etc

  •    Javascript

An open source react rich-text editor ( mordern react editor includes media support such as texts, images, videos, audios, links etc. ), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode. It's supports multiple languages well and welcome you add your language supports. Disabled media insert feature on demo page, because of there was no online API support for the time being, here is The server side API demo in java you may want.

react-magic-hat - 🎩✨Library to implement the Magic Hat technique, blazingly fast 🚀

  •    Javascript

React implementation of what I call the Magic Hat UI technique [DEMO]. 🚀 Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the FLIP technique. Fluid and performant. Thanks to react-flip-move for that.

react-demo - React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter,可能是东半球最佳的 React Starter,基于 Vue Cli 二次开发

  •    Javascript

React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter,可能是东半球最佳的 React Starter,基于 Vue Cli 二次开发

react-spinkit - A collection of loading indicators animated with CSS for React

  •    CSS

Currently I've ported all the spinner animations from Spinkit. If you have other favorite css spinner you'd like to include, open an issue. See more examples on the demo page.

react-mt-svg-lines - A React.js wrapper component to animate the line stroke in SVGs

  •    Javascript

The component wraps your SVG and animates the stroke-dashoffset property on every path element within. To accomplish this, it injects a style tag with a generated string of CSS. For a description of the technique, see this article. Require MtSvgLines into your component (you can import it under any name)...