@genrate/react
v1.0.18
Published
React tools to organize resource and add more plexibility in coding and building react apps
Downloads
14
Maintainers
Readme
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: '[email protected]',
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')
})
}