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/

Versions

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

Content

Basic components

1. Accordion
2. Alert
3. Avatar
4. Badge
5. Breadcrumb
6. Button
7. Button Group
8. Card
9. Carousel
10. Close Button
11. Collapse
12. Dialog
13. Drawer
14. List Group
15. Menu
16. Nav
17. Nav Overflow
18. Navbar
19. Pagination
20. Placeholder
21. Popover
22. Progress
23. Scrollspy
24. Spinner
25. Stepper
26. Tab
27. Toast
28. Toggler
29. Tooltip
30. Toggle Button

Layout components

1. Grid

Content components

1. Images
2. Tables

Form components

1. Form, Fieldset, Field, Group, Field Content & Label
2. Form Control, Text Area & Select
3. Checkbox
4. Radio & Form Check
5. Switch
6. Range
7. Input Group
8. Floating Label
9. Form Adornment & Ghost
10. Chip
11. Chip Input
12. Combobox
13. Date Picker
14. OTP Input
15. Password Strength
16. Form Feedback & Text

Extension components

1. Click Boundary
2. Code Block
3. Countdown
4. DialogBox
5. Markdown View
6. Horizontal Marquee
7. Icon
8. Live TSX
9. Loading
10. Month Calendar
11. Nameplate
12. Overlay Box
13. Page Nav
14. Scroll Nav
15. Share Box
16. Spinner Button
17. Table Spinner
18. Text Truncate
19. Time
20. Time Distance
21. Timeline
22. Type Echo
23. User Rank
24. Vertical Marquee
25. 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 web-utility

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@6.0.0-alpha.1/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.13.2/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/github-markdown-css@5.9.0/github-markdown.css" />
<link rel="stylesheet" href="https://unpkg.com/idea-react/dist/style.css" />

tsconfig.json

Compatible with MobX 6/7:

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

Polymorphic roots

Components with a single root support as, accepting an HTML tag or another React component:

import { ComponentPropsWithRef, FC } from 'react';
import { Button, Card, PolymorphicProps } from 'idea-react';

const RouterLink: FC<ComponentPropsWithRef<'a'> & { to: string }> = ({ to, ...props }) => (
    <a {...props} href={to} />
);

type LinkCardProps = PolymorphicProps<typeof RouterLink, { theme?: 'primary' }>;

<Card as="article">Article content</Card>;

<Button as={RouterLink} to="/docs" variant="solid" theme="primary">
    Documentation
</Button>;

The target's additional props are inferred and forwarded, including required props and compatible refs. Component-specific props keep their existing meaning and take precedence on name collisions. Without as, the default markup and props stay unchanged. Class component refs still refer to the component instance. Behavioral components require compatible root elements; custom roots must forward their DOM props and refs. Components that render fragments or multiple roots do not support as.

DialogBox model

import { formToJSON } from 'web-utility';
import { Component, FormEvent } from 'react';
import {
    Button,
    Dialog,
    DialogBody,
    DialogBox,
    DialogBoxClose,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    Form,
    FormControl,
    FormField,
    FormLabel
} from 'idea-react';

export class ExamplePage extends Component {
    inputDialog = new DialogBox<{}, Record<'a' | 'b', number>>(({ defer }) => (
        <Dialog open={!!defer} onClose={() => defer?.reject(new DialogBoxClose())}>
            <DialogHeader>
                <DialogTitle>Dialog</DialogTitle>
            </DialogHeader>
            <DialogBody>
                <Form
                    className="d-flex flex-column gap-3"
                    id="input-dialog"
                    onSubmit={this.handleSubmit}
                    onReset={() => defer?.reject(new DialogBoxClose())}
                >
                    <FormField>
                        <FormLabel htmlFor="input-dialog-a">A</FormLabel>
                        <FormControl id="input-dialog-a" type="number" name="a" />
                    </FormField>
                    <FormField>
                        <FormLabel htmlFor="input-dialog-b">B</FormLabel>
                        <FormControl id="input-dialog-b" type="number" name="b" />
                    </FormField>
                </Form>
            </DialogBody>
            <DialogFooter>
                <Button form="input-dialog" type="submit" variant="solid" theme="primary">
                    √
                </Button>
                <Button form="input-dialog" type="reset" variant="solid" theme="danger">
                    ×
                </Button>
            </DialogFooter>
        </Dialog>
    ));

    handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        const data = formToJSON<Record<'a' | 'b', number>>(event.currentTarget);

        this.inputDialog.defer?.resolve(data);
    };

    someLogic = async () => {
        try {
            const data = await this.inputDialog.open();

            alert(JSON.stringify(data, null, 4));
        } catch (error) {
            if (error instanceof DialogBoxClose) console.warn(error.message);
        }
    };

    render() {
        return (
            <>
                <Button onClick={this.someLogic}>Open dialog</Button>

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

Toast

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

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

    render() {
        return (
            <>
                <Button
                    onClick={() =>
                        this.toast
                            .open({
                                title: 'Notification',
                                body: 'Hello, world!',
                                theme: '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.