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://idea-react.vercel.app/
Content
Components
- Time Distance
- Icon
- Avatar
- Nameplate
- Type Echo
- Click Boundary
- Spinner Button
- Select
- Code Block
- Editor
- Editor HTML
- Open Map
- Table Spinner
- Loading
- Overlay Box
- Dialog
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.
Utilities
Usage
Scaffolds
CSS on CDN
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-icons@1.10.4/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/leaflet@1.9.4/dist/leaflet.css"
/>
Open Map
Common example
China map in China Open-source Map project
import { FC } from 'react';
import { OpenMap, OpenMapProps } from 'idea-react';
export const ChinaMap: FC<OpenMapProps> = props => (
<OpenMap center={[34.32, 108.55]} zoom={4} {...props} />
);
Use in Next.js
import ChinaMap from '../../components/ChinaMap';
export default function ExampleMap() {
return (
typeof window !== 'undefined' && (
<ChinaMap
markers={[
{
position: [34.32, 108.55],
tooltip: 'Geo Center of China'
}
]}
onMarkerClick={console.log}
/>
)
);
}
Development
Publish
-
update
version
inpackage.json
file -
add Git tag
git tag vx.xx.x # such as v0.23.0
- review tag
git tag
- publish code with tag version
git push origin master --tags # push all branches and tags on master