reactfire - ReactJS mixin for easy Firebase integration

•    Javascript

---

Firebase mixin for ReactJS

react mixin firebase realtime react-component

vuefire - Firebase bindings for Vue.js

•    Javascript

---

Firebase bindings for Vue.js

vue mixin firebase realtime

react-mixin - mixins in react with es6 style classes

•    Javascript

---

React doesn't have anything built in for this, but don't worry! This package implements react's mixin strategy for arbitrary objects. 90% of the time you don't need mixins, in general prefer composition via high order components. For the 10% of the cases where mixins are best (e.g. PureRenderMixin and react-router's Lifecycle mixin), this library can be very useful.

react mixin es6 class smart-mixin

Sortable - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices

•    Javascript

---

Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists. You can use any element for the list and its elements, not just ul/li. Here is an example with divs.

drag sortable reordering sort drag-and-drop drag-drop ui draggable droppable reorder meteor angular ng-sortable react mixin

sass-flex-mixin - Flexbox mixins

•    CSS

---

A version compatible with Compass is provided by @trinonsense, on the compass branch. Licensed under MIT.

sass css flexbox mixin

core-decorators - Library of stage-0 JavaScript decorators (aka ES2016/ES7 decorators but not accurate) inspired by languages that come with built-ins like @​override, @​deprecate, @​autobind, @​mixin and more

•    Javascript

---

Library of JavaScript stage-0 decorators (aka ES2016/ES7 decorators but that's not accurate) inspired by languages that come with built-ins like @​override, @​deprecate, @​autobind, @​mixin and more. Popular with React/Angular, but is framework agnostic. Similar to Annotations in Java but unlike Java annotations, decorators are functions which are applied at runtime. This can be consumed by any transpiler that supports stage-0 of the decorators spec, like babel.js version 5. Babel 6 does not yet support decorators natively, but you can include babel-plugin-transform-decorators-legacy or use the applyDecorators() helper.

es6 es7 es2015 es2016 babel decorators override deprecated annotations autobind react angular lodash mixin mixins

react-masonry-component - A React.js component for using @desandro's Masonry

•    Javascript

---

if you wish to have IE8 support, v2 with React 0.14 is the highest version available. To use the component just require the module.

react mixin masonry packery isotope react-component

react-tween-state - React animation.

•    Javascript

---

The equivalent of React's this.setState, but for animated tweens: this.tweenState. Live demo and source.

react animation tween transition state interactive mixin interpolation

mixwith.js - A mixin library for ES6

•    Javascript

---

A simple and powerful mixin library for ES6. mixwith differs from other mixin approaches because it does not copy properties from one object to another. Instead, mixwith works with "subclass factories" which create a new class that extends a superclass with the mixin - this is called a mixin application.

mixin mixins classes

sass-burger - A Sass mixin for creating hamburger icons.

•    CSS

---

A Sass mixin for creating hamburger icons. Download the _burger.scss file manually, or use a package manager.

burger hamburger navicon icon mixin sass

lodash-id - Makes it easy to manipulate id-based resources with lodash or lowdb

•    Javascript

---

Finds and returns document by id or undefined.Adds document to collection, sets an id and returns created document.

database lodash lowdb underscore query id resource mixin

cocktail - Cocktail: DRY up your backbone code with mixins

•    Javascript

---

Break out your shared Backbone.js model/collection/view behaviors into separate modules and mix them into your classes with Cocktail - an implementation of Backbone mixins. Mixins are simply bare-bones JavaScript objects that provide additional functionality to your Backbone objects. Think of them as bags of methods that will get added to all instances of your objects.

backbone mixin

vue-slicksort - A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️

•    Javascript

---

That's it! Vue Slicksort does not come with any styles by default, since it's meant to enhance your existing components.

drag grid drop vue-slicksort mixin-components sortable-helper sort animated dependency free vue vuejs vue-component vue-mixin sortable sortable-list list smooth mixin component react-sortable-hoc vue-sort vue-sortable drag-and-drop

vanilla-framework - From community websites to web applications, this CSS framework will help you achieve a consistent look and feel

•    CSS

---

Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement its patterns. You can link to the latest build to add directly into your markup like so, by replacing the x values with the version number you wish to link.

sass css-framework css html vanilla-framework ubuntu vanilla framework scss mixin module

Sass-Web-Fonts - A Sass mixin to allow easy, efficient usage of Google Web Fonts.

•    CSS

---

A Sass mixin to allow easy, efficient usage of Google Web Fonts. You can clone this repo and include _web-fonts.scss in your project manually, or you can install the sass-web-fonts package from npm or Bower.

sass web fonts google mixin

react-scroll-spy - React.js mixin for updating state based on the window's scroll position

•    Javascript

---

React.js mixin for updating state based on the window's scroll position

react react-component ui scroll spy scrollspy mixin

react-lifecycle - A ReactJS mixin for logging component lifecycle method call

•    Javascript

---

A ReactJS mixin for logging component lifecycle method call

react mixin lifecycle

mixto - A mixin superclass

•    CoffeeScript

---

A mixin superclass. Its subclasses have `.extend` and `.includeInto` methods to mix behavior into other objects and classes.

mixin trait

react-timer-mixin - TimerMixin provides timer functions for executing code in the future that are safely cleaned up when the component unmounts

•    Javascript

---

Using bare setTimeout, setInterval, setImmediate and requestAnimationFrame calls is very dangerous because if you forget to cancel the request before the component is unmounted, you risk the callback throwing an exception.If you include TimerMixin, then you can replace your calls to setTimeout(fn, 500) with this.setTimeout(fn, 500) (just prepend this.) and everything will be properly cleaned up for you.

react timer mixin

class - Class System

•    Javascript

---

hydro-class is a full Class system for JavaScript. It's very much inspired by Ember.js' object system, but ported over to Node and without the weight of Ember. create() allows you to add more properties before the instance is created (for that instance only) and add Mixins for that instance only.

mixin ember class class-system object-system js simple inherit hydro