@mydefi/ui

@mydefi/ui

UI components originally created for the MyDeFi app.

Overview

mydefiUI is a React Library used to build the user interface of the MyDeFi app. We decided to open-source it to let anyone benefit from it and potentially build applications that could be integrated in MyDeFi.

Install

npm install --save @mydefi/ui

Usage

import React, { Component } from 'react'

import { Main, Card } from '@mydefi/ui'

class Example extends Component {
  render () {
    return (
      <Main>
        <Card title="This is a test card" description="And more details about it."></Card>
      </Main>
    )
  }
}

Components

Main

Encapsulate your app in the Main component to ensure a correct display of all of our components.

import { Main } from '@mydefi/ui'

<Main>
  {/* Your app here */}
</Main>

Card

The Card component can be used as a container for some specific data.

import { Card } from '@mydefi/ui'

<Card title="Title of the card" description="This is the card description.">
  {/* Add content here */}
</Card>

Properties

• title (optional): Will automatically display a formatted title for the card.
• description (optional): Will automatically display a formatted description for the card.

The apparence of the title and description properties can be customised by using a <Text> component instead of a simple string.

SidePanel

The SidePanel is an animated panel that appears from the right side of the screen. At MyDeFi we use it to display more details about an app when a user clicks on an app card.

import { SidePanel } from '@mydefi/ui'

<SidePanel title="Title of the SidePanel" description="This is the SidePanel description.">
  {/* Add content here */}
</SidePanel>

Properties

• title (optional): Will automatically display a formatted title for the SidePanel.
• description (optional): Will automatically display a formatted description for the SidePanel.

The apparence of the title and description properties can be customised by using a <Text> component instead of a simple string.

License

MIT © Baptiste Greve