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. Button
2. Badge
3. Navbar
4. Menu
5. Native Dialog
6. Time
7. Time Distance
8. Timeline
9. Countdown
10. Icon
11. Avatar
12. Nameplate
13. Text Truncate
14. Type Echo
15. Horizontal Marquee
16. Vertical Marquee
17. Click Boundary
18. Spinner Button
19. Select
20. Month Calendar
21. Code Block
22. Live TSX
23. Scroll Nav
24. Page Nav
25. Editor
26. Editor HTML
27. Table Spinner
28. Loading
29. Share Box
30. Overlay Box
31. Dialog
32. Toast
33. User Rank
34. 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

npm install idea-react mobx mobx-react react react-dom react-element-to-jsx-string

For the current alpha release, use idea-react@next instead of idea-react.

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" />

tsconfig.json

Compatible with MobX 6/7:

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

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 />
            </>
        );
    }
}

Toast

import { Component } from 'react';
import { Button } from 'react-bootstrap';
import { Toast } from 'idea-react';

export class ExamplePage extends Component {
    toast = new Toast();

    render() {
        return (
            <>
                <Button
                    onClick={() =>
                        this.toast
                            .open({
                                title: 'Notification',
                                body: 'Hello, world!',
                                variant: 'success'
                            })
                            .then(() => console.log('Toast closed'))
                    }
                >
                    Show Toast
                </Button>

                <this.toast.Component />
            </>
        );
    }
}

Development

Documentation

The document workspace provides a static website with MDX pages, theme switching, and local search, adapting the upstream website to Idea React.

pnpm install
pnpm --filter @idea-react/document dev

For build and deployment quick start, see the document workspace guide above. Contributor conventions, validation, and release instructions are in AGENTS.md.