1.0.18 • Published 3 months ago
@genrate/react v1.0.18
GenRate React
GenRate React package aims to organize, expand, add more plexibility on building react web application
Install
npm install @genrate/react
Usage
Design
/**
* Output
*/
const Output ({
// overriden test data
user = {
email: 'test@test.com',
password: 'passsword'
}
}) => (
user && <Box>
{email} {password}
</Box>
)
/**
* Input
*/
const Input () => (
<Box>
<Typography>
Sign in
</Typography>
<Box>
<TextField required label="Email Address" name="email" />
<TextField label="Password" type="password" id="password" />
<FormControlLabel
control={<Checkbox name="remember" value="remember" color="primary" />}
label="Remember me"
/>
<Button type="submit" >
Sign In
</Button>
</Box>
<Output />
</Box>
)
/**
* Layout
*/
export const Main = () => (
<Box>
<Avatar>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Input />
<Output />
</Box>
)
Add Functionality
import { useConnector } from '@genrate/react';
interface Data {
email: string;
password: string;
};
/**
* Input Component
*/
export const SignIn = ({
onSubmit = (data: Data) => console.log('test', data)
}) => {
const { view, model, pass, attach } = useConnector<Data>();
// render only once
return view(Input, {
// Select components to manipulate
'TextField[required]': model(), // dynamic auto binding of input
'Box TextField[name=password]': model('password'), // auto binding of input
// prop level model auto binding
'FormControlLabel[control]': model(['control'], (e) => e.target.checked),
// dynamic auto binding base state data
TextField: ({ input }) => input == 'yes' ? model('input2') : model('input'),
// Add on click event to button
'Button[type=submit]':
// subscribe to specific data
({ email, password }) =>
() => ({
onClick: () => {
onSubmit({ email, password, remember })
}
}),
})
}
/**
* Main Component
*/
export default function () {
const { view, attach, set, pass, query, each } = useConnector(
// state
state: { list: [1,2,3], input: [] },
// bind react hooks
hooks: {
'login|isLoggedIn' => useAuth()
}
);
return view(Main, {
// Attach othe component and set prop
Input: attach(SignIn, {
// receive data from other component
onSubmit: (data) => set('user', data)
}),
// search inside an element and apply data changes
Input: query({
TextField: model(),
Button:
({ email, login, isLoggedIn }) =>
() => ({
onClick: () => isLoggedIn ? logout(email) : login(email)
})
}),
// Iterator
Input: each(
({ list }) =>
() => list.map((l, i) => {
if (l == 1) {
// query iterated element
return query({
// array model value
TextField: model(`input.${i}`)
})
}
// iterated element props
return ({ test: 'value' })
})
),
// pass data to other component
Test: pass('user', 'input')
})
}
1.0.18
3 months ago
1.0.17
3 months ago
1.0.16
3 months ago
1.0.15
3 months ago
1.0.14
3 months ago
1.0.13
3 months ago
1.0.12
4 months ago
1.0.11
4 months ago
1.0.10
4 months ago
1.0.9
4 months ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago