react-override-ui
v0.0.7react-override-ui
The goal of this library is to have a set of components that are:
- Easy to install via NPM
- Easy to override
Current UI components:
- Modal
- Icon (Uses font awesome icons. Not all icons are added. You may need to make a PR to add the ones you want if they don't exist)
- Dropdown
- Menu (only "lined" type currently supported)
In all components, you can pass an options
object to override CSS.
For example:
const override = {
"borderBottom": "2px solid purple"
};
Modal Example
import { Modal } from "react-override-ui";
<Modal isOpen={this.state.modalOpen} onClose={() => this.onModalClose()}>
<Modal.Content>
Modal Content Here
</Modal.Content>
</Modal>
Icon Example
import { Icon } from "react-override-ui";
<Icon icon="cog" />
Dropdown Example
import { Dropdown } from "react-override-ui";
const dropdownItems = [
{
text: "Link",
icon: "link", // Icons not necessary, but are supported as menu items
clickHandler: () => // do something
},
{
text: "Preview",
icon: "eye",
clickHandler: () => // do something
}
];
<Dropdown>
<Dropdown.Menu>
{this.props.dropdownItems.map((item, index) => (
<Dropdown.Item options={item} key={index} onClick={item.clickHandler} />
))}
</Dropdown.Menu>
</Dropdown>
Menu Example
import { Menu } from "react-override-ui";
const menuOptions = {
type: "lined",
override: {
"borderBottom": "2px solid purple" // not necessary (example only)
}
};
<Menu options={menuOptions}>
{menuItemOptions.map((item, index) => (
<Menu.Item
options={item}
key={index}
isActive={this.props.currentUrl === item.url ? true : false}
onClick={() => this.setNavTab(item.url)}
/>
))}
</Menu>
Card Example
import { Card } from "react-override-ui";
<Card>
<Card.Header>Card Header</Card.Header>
<Card.Content>Card Content</Card.Content>
</Card>
npm i react-override-ui
Metadata
- ISC
- Whatever
- Chase Fleming
- released 5/17/2019