tvrcgo / Mobx React Connect
Licence: mit
Connect react component, mobx store and css modules.
Stars: ✭ 13
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Mobx React Connect
React Native Style Tachyons
Better styling for React Native
Stars: ✭ 640 (+4823.08%)
Mutual labels: css-modules
Css Blocks
High performance, maintainable stylesheets.
Stars: ✭ 6,320 (+48515.38%)
Mutual labels: css-modules
Typed Css Modules
Creates .d.ts files from CSS Modules .css files
Stars: ✭ 663 (+5000%)
Mutual labels: css-modules
Mobx State Tree
Full-featured reactive state management without the boilerplate
Stars: ✭ 6,317 (+48492.31%)
Mutual labels: mobx
Braid Design System
Themeable design system for the SEEK Group
Stars: ✭ 888 (+6730.77%)
Mutual labels: css-modules
React Css Themr
Easy theming and composition for CSS Modules.
Stars: ✭ 582 (+4376.92%)
Mutual labels: css-modules
React Mobx React Router Boilerplate
A simple boilerplate based on create-react-app and add mobx, react-router, linter, prettier and so on. 一个简单的 react 脚手架依赖于 create-react-app 新增了 mobx react-router,linter,prettier 等。
Stars: ✭ 12 (-7.69%)
Mutual labels: mobx
Microsite
Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
Stars: ✭ 632 (+4761.54%)
Mutual labels: css-modules
React Css Components
Define React presentational components with CSS
Stars: ✭ 689 (+5200%)
Mutual labels: css-modules
Wewechat
💬 Unofficial WeChat client built with React, MobX and Electron.
Stars: ✭ 5,618 (+43115.38%)
Mutual labels: mobx
Ignite Bowser
Bowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.
Stars: ✭ 586 (+4407.69%)
Mutual labels: mobx
Selft Resume Website
selft-resume-website,用react开发的简单的个人简历网站。适合react新手入门练习。
Stars: ✭ 7 (-46.15%)
Mutual labels: css-modules
React Redux Saga Starter
Basic, Opinionated starter kit for React+Redux+Redux Saga with support for SCSS CSS Modules, Storybook, JEST testing, and ESLint
Stars: ✭ 12 (-7.69%)
Mutual labels: css-modules
React Styling Hoc
Механизм темизации для React-компонентов, написанных с использованием CSS модулей.
Stars: ✭ 25 (+92.31%)
Mutual labels: css-modules
mobx-react-connect
Connect react component, mobx store and css module.
connect( StatelessComponent, Stores, CSSModule )
Features
- Only stateless component.
- Map observable stores to component.
- Easy to use css modules.
Install
npm install mobx-react-connect --save-dev
Example
Connect component and store.
Store class
// index.store.js
export default class Store {
@observable id = 0
constructor (props) {
const { id } = props
this.id = id
}
@computed
get userId () {
return this.id
}
@action.bound
increase() {
this.id++
}
}
React component.
// index.js
import { connect } from 'mobx-react-connect'
import Store from './index.store'
// functional component
const HelloView = (props, { store }) => {
return (
<h1>hello buddy. { store.userId } <a onClick={store.increase}>next</a></h1>
)
}
export default connect(HelloView, {
store: Store
})
Instantiate component.
import HelloView from './index'
<HelloView id={2} />
Connect component and CSS Modules
You won't need to set className for element like className={css.title}
any more.
- Set
clazz
attribute for element. Styles in css module will be combined intoclassName
. - Multiple style names is available, like
clazz='wrap title'
. -
clazz
andclassName
can be concurrent and styles will be joined together.
import { connect } from 'mobx-react-connect'
import css from './index.css'
const View = () => {
return (
<div clazz='green red'></div>
)
}
export default connect(View, {}, css)
index.css
- Styles for component
.green {
background-color: green;
}
.red {
color: red;
}
License
MIT
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].