poem-ui

Simple and customizable React UI components.

Some components use third-party plug-ins to improve the interaction. You can remove third-party plugins, or compatible with them.

Demos

https://xizon.github.io/poem-ui/public/

Components List

Here is a table of the components and their status.

WEB ELEMENTS	FORMS	INTERACTION	LAYOUT	NAVIGATION
Accordion	Input	Infinite Scroll	Grid	Cascading DropDown List
Accordion Slider	Password Input	Image Perspective Hover	Gallery	Dropdown Menu
Back To Top	Merge Input	Mousewheel Interaction		Multilevel Dropdown Menu
Button	Tag Input	Parallax		Navigation
Card	Textarea	Scroll Reveal
Content Placeholder	Select	Sticky Elements
Counter	Custom Select
Hybrid Content Slider	Checkbox
Image Shapes	Radio
Lightbox	Multi Select
List Bulleted	Single Select
Modal Dialog	Date
Pagination	Number
Periodical Scroll	Switch
Progress Bar	Dynamic Fields
Rating	File
Seamless Scrolling Element	File Field
Show More Less
Slideshow
Table
Table Grid
Table Sorter
Tabs
Tabs Animated
Timeline
Toaster
Tooltip

Usage

To start using the components, please follow these steps:

1. Install package

npm i poem-ui

https://www.npmjs.com/package/poem-ui

2. Now you can start using components like so:

❤️ Recommend ❤️ Use modularized (supports ES modules tree shaking by default for JS part):

You can manually import the stylesheet as needed.

import React from 'react';
import { Button, ButtonGroup } from 'poem-ui/Button';

//import common styles (CSS reset library)
import 'poem-ui/UtilsReset/styles.css'; 

//import component styles
import 'poem-ui/Button/styles.css';

function Example() {
  return <Button border="thin" spacing="bottom" background="primary" corners="pill" size="medium" id="app-btn-1" href="#" data-title="button" onClick={(e) => {e.preventDefault(); alert( e.target.id );} }>Click me to view ID!</Button>
}

function Example2() {
  return <>
    <ButtonGroup spacing="bottom">
      <Button border="thin" background="primary transparent" corners="pill" size="small" href="https://google.com">Group</Button>
      <Button border="thin" background="primary transparent" corners="pill" size="small" href="#">Group</Button>
      <Button border="thin" background="primary transparent" corners="pill" size="small" href="#">Group</Button>
    </ButtonGroup>
  </>;
}

import React from 'react';
import { Button } from 'poem-ui';

//import common styles (CSS reset library)
import 'poem-ui/UtilsReset/styles.css'; 

//import component styles
import 'poem-ui/Button/styles.css';

function Example() {
  return <Button border="thin" spacing="bottom" background="primary" corners="pill" size="medium" id="app-btn-1" href="#" data-title="button" onClick={(e) => {e.preventDefault(); alert( e.target.id );} }>Click me to view ID!</Button>
}

Development Mode

You will need to have node setup on your machine.

Step 1. Clone the repo to get all source files including build scripts:

$ git clone git://github.com/xizon/poem-ui.git

Step 2. First, using an absolute path into your "poem-ui/" folder directory.

$ cd /{your_directory}/poem-ui

Step 3. Before doing all dev stuff make sure you have Node 14+ installed. After that, run the following code in the main directory to install the node module dependencies.

$ sudo npm install

Step 4. Commonly used commands:

Debug application. It can be checked separately as TypeScript without compiling and packaging behavior.

$ npm run check

Step 5. When you’re ready to deploy to production, create commonJS files with:

$ npm run build

Test page ./public/index.html

$ npm run dev

Clear the components' folder published to npm in the root directory

$ npm run clear:npm

💡 Note:

If you upgrade the version of Node, please execute the following code:
$ sudo npm install
$ sudo npm rebuild node-sass

Changelog

= 0.0.5 (October 1, 2022) =

Tweak: Updated <Pagination /> component.

= 0.0.4 (January 5, 2022) =

Optimized the file size compiled by babel.
Separate styles and independent import style manually.

= 0.0.1 (January 3, 2022) =

First release.

Contributing

You can remove third-party plugins (used by some components), or compatible with them.

Licensing

Licensed under the MIT.