https://github.com/ujjwalguptaofficial/godam-react
https://github.com/ujjwalguptaofficial/godam-react
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ujjwalguptaofficial/godam-react
- Owner: ujjwalguptaofficial
- License: mit
- Created: 2021-06-28T04:40:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-29T17:19:13.000Z (about 4 years ago)
- Last Synced: 2025-03-07T06:03:52.019Z (7 months ago)
- Language: JavaScript
- Size: 461 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# godam-react
Godam plugin for react framework.
# Installation
```
npm i godam-react
```
# Guide
## Using class based component
### Setup store
```
import React from "react";
import { initStore } from "godam-react";
import { Godam, Mutation, Expression } from "godam";
class RootMutation extends Mutation {
firstName(value) {
this.state.firstName = value;
}
lastName(value) {
this.state.lastName = value;
}
}
class RootExpression extends Expression {
get fullName() {
return `${this.get('firstName')} ${this.get('lastName')}`
}
constructor() {
super();
this.markComputed("fullName", "firstName", 'lastName');
}
}
const store = new Godam({
state: {
firstName: 'ujjwal',
lastName: 'gupta'
},
mutation: RootMutation,
expression: RootExpression
})
initStore(store, React);
```
### Using in component
```
import React from "react";
import { mapState, createState, mapExpression, mapMutation } from "godam-react";
export default class Layout extends React.Component {
constructor() {
super();
this.createState({
firstName: mapState('firstName'),
lastName: mapState('lastName'),
gender: 'male',
fullName: mapExpression('fullName')
});
this.createMethod({
setFirstName: mapMutation("firstName")
})
}
onFirstNameChange(e) {
this.setFirstName(e.target.value);
}
onLastNameChange(e) {
this.store.set("lastName", e.target.value);
}
onGenderChange(e) {
this.setState({ "gender": e.target.value })
}
render() {
return (
Full Name:
{this.state.fullName}
First Name:
Last Name:
Gender:
)
}
}
```
## Functional component
### Setup store
```
import React from "react";
import { initStore } from "godam-react";
import { Godam, Mutation, Expression } from "godam";
class RootMutation extends Mutation {
firstName(value) {
this.state.firstName = value;
}
lastName(value) {
this.state.lastName = value;
}
}
class RootExpression extends Expression {
get fullName() {
return `${this.get('firstName')} ${this.get('lastName')}`
}
constructor() {
super();
this.markComputed("fullName", "firstName", 'lastName');
}
}
export const store = new Godam({
state: {
firstName: 'ujjwal',
lastName: 'gupta'
},
mutation: RootMutation,
expression: RootExpression
})
initStore(store, React);
```
### Using in component
```
import React, { useState } from "react";
import { mapState, createState, mapExpression, createMethod, mapMutation } from "godam-react";
export default function () {
const { firstName, lastName, fullName, store } = createState({
firstName: mapState('firstName'),
lastName: mapState('lastName'),
fullName: mapExpression('fullName')
})
const { setFirstName } = createMethod({
setFirstName: mapMutation('firstName')
});
const [gender, setGender] = useState('gender');
const onFirstNameChange = (e) => {
setFirstName(e.target.value);
}
const onLastNameChange = (e) => {
store.set('lastName', e.target.value);
}
const onGenderChange = (e) => {
setGender(e.target.value);
}
return (
Full Name:
{fullName}
First Name:
Last Name:
Gender:
)
}
```