Idea React

A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.

• API document: https://idea2app.github.io/Idea-React/
• Preview site: https://idea2app.github.io/Idea-React/preview/

Versions

SemVer	status	ES decorator	MobX
>=2	✅developing	stage-3	>=6.11
<2	❌deprecated	stage-2	>=4 <6.11

Content

Components

1. Time
2. Time Distance
3. Timeline
4. Countdown
5. Icon
6. Avatar
7. Nameplate
8. Text Truncate
9. Type Echo
10. Horizontal Marquee
11. Vertical Marquee
12. Click Boundary
13. Spinner Button
14. Select
15. Month Calendar
16. Code Block
17. Live TSX
18. Page Nav
19. Editor
20. Editor HTML
21. Table Spinner
22. Loading
23. Share Box
24. Overlay Box
25. Dialog
26. User Rank
27. Zodiac Bar

Data components

Table, List & Form components around Data models, have been migrated to https://github.com/idea2app/MobX-RESTful-table, since Idea-React v1.0.0.

Map components

Open Map component & model, have been migrated to https://github.com/idea2app/OpenReactMap, since Idea-React v1.0.0.

Utilities

1. text2color
2. animate()

Usage

Scaffolds

1. MobX: demo & usage
2. Next.js: demo & usage

CSS on CDN

<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.13.1/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.30.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://unpkg.com/idea-react/dist/index.css" />
Copy

tsconfig.json

Compatible with MobX 6/7:

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "experimentalDecorators": false,
        "jsx": "react-jsx"
    }
}
Copy

Dialog

import { formToJSON } from 'web-utility';
import { Component } from 'react';
import { Button, Form, Modal } from 'react-bootstrap';
import { Dialog, DialogClose } from 'idea-react';

export class ExamplePage extends Component {
    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 />
            </>
        );
    }
}
Copy

Development

Publish

1. update version in package.json file

2. add Git tag

git tag vx.xx.x  # such as v2.0.0
Copy

3. review tag

git tag
Copy

4. publish code with tag version

git push origin master --tags  # push all branches and tags on master
Copy