Awesome
Funda UI
<p align="center"> <img src="logo.png" alt="Funda UI" width="180" > </p>React components using pure Bootstrap 5+ which has undergone complex business testing and is easy to integrate with any API. You can load Bootstrap css libraries separately in your project.
All components have undergone complex business verification and provide multiple examples.
<p align="center"> <img src="preview.png" alt="Funda UI" > </p>Key Features
- Simplify the assignment method of diversified data.
- Components are compatible with
gRPC
,REST APIs
,GraphQL
self-packaging, uniformly use Classes and their methods to introduce interfaces - Enhanced user interaction, flexible use in asynchronous and synchronous states
- Introduce appropriate component
.css
files as needed, only for some components with special needs. Most of them can directly use Bootstrap's official style sheet. - Do not embed css-in-js, directly use external CSS styles to completely change the component style.
Components List
Here is a table of the components and their status.
Usage
Step 1. You need to install it:
$ npm i funda-ui
or
$ pnpm add funda-ui
Step 2. Using Bootstrap CSS together (recommended)
<link href="./bootstrap.min.css" rel="stylesheet"/>
You could remove Bootstrap's styles. All components support setting Bootstrap's default class names through
**ClassName
attributes.
Step 3. import required components as required
If the component does not have a CSS file, it can not be imported, or use own CSS.
import Input from 'funda-ui/Input';
import Textarea from 'funda-ui/Textarea';
import CascadingSelect from 'funda-ui/CascadingSelect';
// component styles
import 'funda-ui/CascadingSelect/index.css';
or
import {
Input,
Textarea,
CascadingSelect
} from 'funda-ui';
// component styles
import 'funda-ui/CascadingSelect/index.css';
or
const Input = require('funda-ui').Input;
const Textarea = require('funda-ui').Textarea;
const CascadingSelect = require('funda-ui').CascadingSelect;
// component styles
import 'funda-ui/CascadingSelect/index.css';
Getting Started
Make sure if Node 14+ is installed on your computer.
Step 1: Create a new Lerna workspace by running:
$ cd /{your_directory}/funda-ui
$ npx lerna init
Step 2: Install dependencies (Required)
It will automatically install the dependencies of all resources in packages/
without duplication.
$ npm install
Step 3: To open the visualization, run:
$ npx nx graph
Step 4: To build all projects, run
$ npx lerna run build
or Build the package you want (recommend):
$ npx lerna run build --scope=plugin-1 --scope=plugin-2
Please do not install lerna globally to use lerna run build
Step 5: (optional) Use a custom script like:
$ npx lerna exec npm run export --scope=plugin-2
Publish the lib of components, it will hang on NPM:
$ npm run build:lib
$ npm run build:publish
(Optional) Update Utils
$ npx lerna run build --scope=funda-utils $ npm i $ npx lerna run build
(Optional) Manually generate
.d.ts
files, you can execute$ npx -p typescript tsc lib/cjs/*.js --declaration --allowJs --emitDeclarationOnly
Contributing
Licensing
Licensed under the MIT.