https://github.com/idea2app/idea-react
A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.
https://github.com/idea2app/idea-react
bootstrap component react typescript
Last synced: about 2 months ago
JSON representation
A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.
- Host: GitHub
- URL: https://github.com/idea2app/idea-react
- Owner: idea2app
- Created: 2021-12-25T18:30:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-05-08T23:52:48.000Z (about 1 year ago)
- Last Synced: 2025-08-09T08:27:57.840Z (11 months ago)
- Topics: bootstrap, component, react, typescript
- Language: TypeScript
- Homepage: https://idea2app.github.io/Idea-React/
- Size: 2.96 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# Idea React
A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstrap][3], built by **[idea2app][4] remote developers team**.
[][5]
[][6]
[][7]
[][8]
- 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](source/Time.tsx)
2. [Time Distance](source/TimeDistance.tsx)
3. [Timeline](source/Timeline/)
4. [Icon](source/Icon.tsx)
5. [Avatar](source/Avatar.tsx)
6. [Nameplate](source/Nameplate.tsx)
7. [Type Echo](source/TypeEcho.tsx)
8. [Horizontal Marquee](source/HorizontalMarquee/)
9. [Vertical Marquee](source/VerticalMarquee/)
10. [Click Boundary](source/ClickBoundary.tsx)
11. [Spinner Button](source/SpinnerButton.tsx)
12. [Select](source/Select.tsx)
13. [Month Calendar](source/MonthCalendar.tsx)
14. [Code Block](source/CodeBlock.tsx)
15. [Page Nav](source/PageNav.tsx)
16. [Editor](source/Editor.tsx)
17. [Editor HTML](source/EditorHTML.tsx)
18. [Table Spinner](source/TableSpinner.tsx)
19. [Loading](source/Loading.tsx)
20. [Share Box](source/ShareBox.tsx)
21. [Overlay Box](source/OverlayBox.tsx)
22. [Dialog](source/Dialog.tsx)
23. [User Rank](source/UserRank/)
#### 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`](source/color.ts)
2. [`animate()`](source/animate.ts)
## Usage
### Scaffolds
1. MobX: [demo][9] & [usage][10]
2. Next.js: [demo][11] & [usage][12]
### CSS on CDN
```html
```
### `tsconfig.json`
Compatible with MobX 6/7:
```json
{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"experimentalDecorators": false,
"jsx": "react-jsx"
}
}
```
### Dialog
```tsx
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>(({ defer }) => (
defer?.reject(new DialogClose())}>
Dialog
{
event.preventDefault();
defer?.resolve(formToJSON(event.currentTarget));
}}
onReset={() => defer?.reject(new DialogClose())}
>
A
B
√
×
));
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 (
<>
open Dialog
>
);
}
}
```
## Development
### Publish
1. update `version` in `package.json` file
2. add Git tag
```shell
git tag vx.xx.x # such as v2.0.0
```
3. review tag
```shell
git tag
```
4. publish code with tag version
```shell
git push origin master --tags # push all branches and tags on master
```
[1]: https://reactjs.org/
[2]: https://www.typescriptlang.org/
[3]: https://getbootstrap.com/
[4]: https://idea2app.github.io/
[5]: https://mobx.js.org/
[6]: https://libraries.io/npm/idea-react
[7]: https://github.com/idea2app/Idea-React/actions/workflows/main.yml
[8]: https://npm.im/idea-react/
[9]: https://idea2app.github.io/React-MobX-Bootstrap-ts/
[10]: https://github.com/idea2app/React-MobX-Bootstrap-ts/blob/master/src/page/Component.tsx
[11]: https://next-bootstrap-ts.vercel.app/
[12]: https://github.com/idea2app/next-bootstrap-ts/blob/main/pages/component.tsx