node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป

m-dash-ui

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