ourlit-components v1.0.1
Ourlit's Component Library
Components at a glance:
- OurlitButton
- OurlitTitle, OurlitSubtitle, OurlitHeader, and OurlitText
- OurlitModal
- OurlitIcon
- VerticalStack, HorizontalStack
- OurlitTextInput, OurlitMessageInput
- OurlitImageContainer
Buttons
OurlitButton is a basic button component with the following customization options as props:
text
: The text you want displayed in the buttoncolor
(optional): 'primaryBlue' or 'primaryRed' default 'primaryRed'size
(optional): 'small', 'medium', or 'large' default 'medium'variant
(optional): 'text', 'contained', or 'outlined' default 'contained'onClick
(optional): callback of type() => void
Example:
const MyButton = <OurlitButton text="A Button" onClick={() => console.log('Clicked')} />
Text
Text options are listed in "components at a glance." The typography props are text
and color
(optional).
The color options are 'primaryBlue', 'primaryRed', 'black', 'white'.
Example:
const MyTitle = <OurlitTitle text="Title" color="white" />
Modal
Modal component for displaying a modal on the screen. Consists of a button and popup content. The props are
exactly the same as those of the OurlitButton except modalSize
(optional) which takes 'small', 'medium', and 'large'
content
which takes a React element with the content you want contained in the modal.
Example:
const MyModal = <OurlitModal text="Open Modal" size="small" modalSize="large" content={<OurlitTitle text="The modal content">} />
Icons
Icon component letting you easily include common icons in the site. This is the type declaration for the props:
export type OurlitIconProps = {
size?: 'small' | 'medium' | 'large' | string;
type: (
'home' | 'menu' | 'search' | 'account' | 'settings' | 'add' |
'edit' | 'delete' | 'check' | 'close' | 'refresh' | 'star' |
'notifications' | 'send'
);
};
You can use any of the strings included to define which icon you want displayed. The size prop takes the predefined sizes, or you can give is a font size as a string (i.e. "24", "32", etc.)
Stacks for easy layout
VerticalStack
and HorizontalStack
. Use these as positional elements as containers for contents that already have flexbox-type positioning done for you. Further, you can edit any of the following props as well:
export type StackProps = {
spacing?: number;
justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
divider?: boolean;
style?: React.CSSProperties;
children: React.ReactElement | React.ReactElement[];
};
Text input
This includes OurlitTextInput
and OurlitMessageInput
. They're very similar components, except the message input component is formatted more like a traditional message view. Here are the type props for it:
export type TextInputProps = {
label?: string;
value?: string;
variant?: 'standard' | 'filled' | 'outlined';
onChange?: (event: string) => void;
style?: React.CSSProperties;
rows?: number;
error?: boolean;
helperText?: string;
multiline?: boolean;
};
These apply to both components.
Image container
This is the OurlitImageContainer
component. This is intended to be a convenient container for images. For example, this could be used to diplay the cover photo of a book. Here are its props:
export type ImageContainerProps = {
src: string;
alt?: string;
width?: string;
height?: string;
borderRadius?: string;
};