Aedron / Babel Plugin Jsx Two Way Binding
🍺 A two-way data binding solution for React
Stars: ✭ 15
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Babel Plugin Jsx Two Way Binding
babel-plugin-hyperscript-to-jsx
This plugin transforms react-hyperscript into JSX. Intended to be used as codemod.
Stars: ✭ 20 (+33.33%)
Mutual labels: jsx, babel-plugin
Jsx Control Statements
Neater If and For for React JSX
Stars: ✭ 1,305 (+8600%)
Mutual labels: babel-plugin, jsx
Sowing Machine
🌱A React UI toolchain & JSX alternative
Stars: ✭ 64 (+326.67%)
Mutual labels: babel-plugin, jsx
Babel Plugin Transform Incremental Dom
Turn JSX into IncrementalDOM
Stars: ✭ 146 (+873.33%)
Mutual labels: babel-plugin, jsx
Htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Stars: ✭ 7,299 (+48560%)
Mutual labels: babel-plugin, jsx
Babel Plugin React Persist
Automatically useCallback() & useMemo(); memoize inline functions
Stars: ✭ 91 (+506.67%)
Mutual labels: babel-plugin, jsx
Babel Plugin React Html Attrs
Babel plugin which transforms HTML and SVG attributes on JSX host elements into React-compatible attributes
Stars: ✭ 170 (+1033.33%)
Mutual labels: babel-plugin, jsx
nornj
More exciting JS/JSX based on Template Engine, support control flow tags, custom directives, two-way binding, filters and custom operators.
Stars: ✭ 97 (+546.67%)
Mutual labels: jsx, babel-plugin
Lastadapter
Don't write a RecyclerView adapter again. Not even a ViewHolder!
Stars: ✭ 777 (+5080%)
Mutual labels: databinding
Tslint React
📙 Lint rules related to React & JSX for TSLint.
Stars: ✭ 751 (+4906.67%)
Mutual labels: jsx
React Rails
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
Stars: ✭ 6,417 (+42680%)
Mutual labels: jsx
Preppy
A simple and lightweight tool for preparing the publish of NPM packages.
Stars: ✭ 23 (+53.33%)
Mutual labels: jsx
Mvvmhabitcomponent
👕基于MVVMHabit框架，结合阿里ARouter打造的一套Android MVVM组件化开发方案
Stars: ✭ 857 (+5613.33%)
Mutual labels: databinding
Babel Plugin Add Module Exports
【v0.2 no longer maintained】 Fix babel/babel#2212 - Follow the [email protected] behavior for [email protected]
Stars: ✭ 729 (+4760%)
Mutual labels: babel-plugin
Vim Jsx Pretty
🔦 [Vim script] JSX and TSX syntax pretty highlighting for vim.
Stars: ✭ 717 (+4680%)
Mutual labels: jsx
Webmiddle
Node.js framework for modular web scraping and data extraction
Stars: ✭ 13 (-13.33%)
Mutual labels: jsx
Pokemongo
神奇宝贝 (PokemonGo) 基于 Jetpack + MVVM + Repository 设计模式 + Data Mapper + Kotlin Flow 的实战项目，如果这个仓库对你有帮助，请仓库右上角帮我 star 一下，非常感谢。
Stars: ✭ 848 (+5553.33%)
Mutual labels: databinding
⚠️ It‘s unstable！DO NOT use it on production environment.
A two-way data binding solution for JSX
A easy-to-use two-way data binding solution for front-end frameworks using JSX with "setState" api like React.
See Also:
- Using for-directive in JSX: babel-plugin-jsx-for-directive
- Using if-directive in JSX: babel-plugin-jsx-if-directive
实现原理系列教程：
1. Install
npm install --save-dev babel-plugin-jsx-two-way-binding
2. Basic Usage
Edit your .babelrc file:
{
"plugins": [
"jsx-two-way-binding"
]
}
In your jsx file:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Joe'
}
}
render() { return (
<div>
<h1>I'm {this.state.name}</h1>
<input type="text" model={this.state.name}/>
</div>
)}
}
And it will be compiled to:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Joe'
}
}
render() { return (
<div>
<h1>I'm {this.state.name}</h1>
<input
type="text"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
/>
</div>
)}
}
3. Usage with custom "onChange" event handler
In your jsx file:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Joe'
}
}
render() { return (
<div>
<h1>I'm {this.state.name}</h1>
<input
type="text"
model={this.state.name}
onChange={() => console.log(`Changed at ${(new Date()).toLocaleString()}`)}
/>
</div>
)}
}
Then it will be compiled to:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Joe'
}
}
render() { return (
<div>
<h1>I'm {this.state.name}</h1>
<input
type="text"
value={this.state.name}
onChange={e => {
this.setState({ name: e.target.value });
(() => console.log(`Changed at ${(new Date()).toLocaleString()}`))(e);
}}
/>
</div>
)}
}
4. Usage with nested state object
In your jsx file:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
profile: {
name: {
type: 'string',
value: 'Joe'
},
age: {
type: 'number',
value: 21
}
}
}
}
render() { return (
<div>
<h1>I'm {this.state.profile.name.value}</h1>
<input type="text" model={this.state.profile.name.value}/>
</div>
)}
}
Then it will be compiled to:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
profile: {
name: {
type: 'string',
value: 'Joe'
},
age: {
type: 'number',
value: 21
}
}
}
}
render() { return (
<div>
<h1>I'm {this.state.profile.name.value}</h1>
<input
type="text"
value={this.state.profile.name.value}
onChange={e => this.setState({
profile: Object.assign({}, this.state.profile, {
name: Object.assign({}, this.state.profile.name, {
value: e.target.value
})
})
})}
/>
</div>
)}
}
5. Usage with custom attribute
Edit your .babelrc file:
{
"plugins": [
"jsx-two-way-binding",
{
"attrName": "binding"
}
]
}
In your jsx file:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Joe'
}
}
render() { return (
<div>
<h1>I'm {this.state.name}</h1>
<input type="text" binding={this.state.name}/>
</div>
)}
}
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].