README
Monument UI
About
Monument UI is a JavaScript library which will help you add 3D element and text effect to existing components or to create new ones.
Demo
How to Install
First, install the library in your project by npm:
$ npm install monument-ui
Or Yarn:
$ yarn add monument-ui
Getting Started
• Connect libary with project using ES6 import:
import { Element, Text } from 'monument-ui';
• Later create component and pass options:
<Element
as={ /* component or DOM element */ }
color={ /* color value */ }
shadow={ /* shadow value */ }
colorify={ /* true / false */ }
perspective={ /* x, y */ }
clickable={ /* 'push' / 'pull' */ }
hoverable={ /* 'pull' / 'push' */ }
touchable={ /* 'push' / 'pull' */ }
/>
<Text
as={ /* component or DOM element */ }
color={ /* color value */ }
shadow={ /* shadow value */ }
colorify={ /* true / false */ }
perspective={ /* x, y */ }
/>
Props
Element component
Name | Type | Default | Description | Available options
-|-|-|-|-
color | string |
| Color of depth effect | Color value in hex, rgb(a) etc.
shadow | string |
| Shadow added to element | e.g.: 10px 10px 20px #222a
colorify | boolean | false
| Change color for each layer | Enable true
/ disable false
perspective | object | { x: 5, y: 5 }
| Horizontal and vertical depth length | Object with x
and y
values
clickable | string | undefined
| Action for element on click (only desktop) | push
(move down), pull
(move up)
hoverable | string | undefined
| Action for element on hover (only desktop) | pull
(move up), push
(move down)
touchable | string | undefined
| Action for element on touch (only mobile) | push
(move down), pull
(move up)
Text component
Name | Type | Default | Description | Available options
-|-|-|-|-
color | string |
| Color of depth effect | Color value in hex, rgb(a) etc.
shadow | string |
| Shadow added to text | e.g.: 10px 10px 20px #222a
colorify | boolean | false
| Change color for each layer | Enable true
/ disable false
perspective | object | { x: 5, y: 5 }
| Horizontal and vertical depth length | Object with x
and y
values
Example
export default function App() {
// state, effects, etc.
return (
<Element
as="button"
clickable="push"
color="#f00"
perspective={{ x: 10, y: '-5em' }}
style={{ /* style */ }}
>
<Text
as="h2"
color="#f00"
colorify
perspective={{ x: -4, y: 6 }}
>
Hello World!
</Text>
</Element>
);
}
License
This project is licensed under the MIT License © 2018-present Jakub Biesiada