poem-ui v0.0.6

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.

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>
  </>;
}

Or

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>
}

And, you could also use:

// from Button
const { Button, ButtonGroup } = require('poem-ui/Button');

// from all components
const { Button, Tooltip  } = require('poem-ui');

Licensing

Licensed under the MIT.