m-dash-ui

Purpose

m-dash-ui is a UI library from Mudano built with React. Its objective is to be an aggregate of beatiful and useful general components to be re-used across teams to build new features. Each component should cover most of the general use-cases and avoid getting into specifics of the features it's being used on.

Documentation

Avatar

A simple user avatar component, with support for showing name initials.

Props

prop	requiredness	type	description
name	required	string	Name of the user
url	optional	string	Url or base64 for the image
base64	optional	boolean	Whether url is base64 or not
showLabel	optional	boolean	Whether to show a label with the user's name below the avatar
size	optional	string	Can be either nothing, sm, md or lg. Default size is 42px, sm is 22px, md is 32px and lg is 64px
renderTooltip	optional	function	A function that returns jsx or a component with the content of a tooltip
style	optional	object	An object with valid custom css for the avatar
className	optional	string	A custom class for the avatar wrapper
onMouseLeave	optional	function	Function to be called when mouse leaves the avatar
onMouseEnter	optional	function	Function to be called when mouse enters the avatar
onClick	optional	function	Function to be called the avatar is clicked

Iso

Isotope grid component

Props

prop	requiredness	type	description
data	required	array	Array of items to be rendered on the grid
itemToKey	required	function	Function that transforms each item on a key that's passed to react, so the component doesn't need to infer anything about the items structure
renderItem	optional	function	Recommended way of customizing the items rendering. The function receives the following signature: ({ item, removeItem })
comp	optional	function	Unrecommended way of customizing the items rendering. The component receives the item data spread into its props and a removeMe props for removing the item
vertical	optional	boolean	Transforms the grid view into a vertical list
filter	optional	string	String following the isotope format for filtering the rendered items
itemClassName	optional	string	CSS class to be passed to the items wrapper
className	optional	string	CSS class to be passed to the grid wrapper