A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.
SemVer | status | ES decorator | MobX |
---|---|---|---|
>=2 |
✅developing | stage-3 | >=6.11 |
<2 |
❌deprecated | stage-2 | >=4 <6.11 |
Table, List & Form components around Data models, have been migrated to https://github.com/idea2app/MobX-RESTful-table, since Idea-React v1.0.0.
Open Map component & model, have been migrated to https://github.com/idea2app/OpenMap, since Idea-React v1.0.0.
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/animate.css@4.1.1/animate.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css"
/>
<link rel="stylesheet" href="https://unpkg.com/idea-react/dist/index.css" />
tsconfig.json
Compatible with MobX 6/7:
{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"experimentalDecorators": false,
"jsx": "react-jsx"
}
}
import { formToJSON } from 'web-utility';
import { PureComponent } from 'react';
import { Button, Form, Modal } from 'react-bootstrap';
import { Dialog, DialogClose } from 'idea-react';
export class ExamplePage extends PureComponent {
inputDialog = new Dialog<Record<'a' | 'b', number>>(({ defer }) => (
<Modal show={!!defer} onHide={() => defer?.reject(new DialogClose())}>
<Modal.Header>Dialog</Modal.Header>
<Modal.Body>
<Form
id="input-dialog"
onSubmit={event => {
event.preventDefault();
defer?.resolve(formToJSON(event.currentTarget));
}}
onReset={() => defer?.reject(new DialogClose())}
>
<Form.Group>
<Form.Label>A</Form.Label>
<Form.Control type="number" name="a" />
</Form.Group>
<Form.Group>
<Form.Label>B</Form.Label>
<Form.Control type="number" name="b" />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer className="d-flex justify-content-end gap-3">
<Button form="input-dialog" type="submit">
√
</Button>
<Button form="input-dialog" type="reset" variant="danger">
×
</Button>
</Modal.Footer>
</Modal>
));
someLogic = async () => {
try {
const data = await this.inputDialog.open();
alert(JSON.stringify(data, null, 4));
} catch (error) {
if (error instanceof DialogClose) console.warn(error.message);
}
};
render() {
return (
<>
<Button onClick={this.someLogic}>open Dialog</Button>
<this.inputDialog.Component />
</>
);
}
}
update version
in package.json
file
add Git tag
git tag vx.xx.x # such as v2.0.0
git tag
git push origin master --tags # push all branches and tags on master