Medly Components

Themable React components with various configurations to match your needs.

Documentation

To view a detailed description of the components in storybook click here.

🚀 Getting started
📦 Packages
- 🧩 Core
- 📝 Forms
- ℹ Icons
- ⧉ Layout
- 🌀 Loaders
- 📄 Markdown
- 🏞 Theme
- 🛠 Utils
📜 Built with
👨‍💻 Contributing
📝 NPM scripts

Getting Started

npx create-react-app medly-components-demo --template typescript
cd medly-components-demo
yarn add styled-components @types/styled-components
yarn add @medly-components/theme @medly-components/utils @medly-components/icons @medly-components/core @medly-components/layout @medly-components/loaders @medly-components/forms

Replace the index.tsx content with the following:

import { defaultTheme } from '@medly-components/theme';
import { CssBaseline } from '@medly-components/core';
import { ThemeProvider } from 'styled-components';
import React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
 <ThemeProvider theme={defaultTheme}>
  <CssBaseline />
  <App />
 </ThemeProvider>,
 document.getElementById('root')
);

Replace the App.tsx content with the following:

import React from 'react';
import { Button } from '@medly-components/core';

const App: React.FC = () => <Button variant="solid">Click me!</Button>;

export default App;

If you are using a static property of any component like Modal.Header, you must add "strictNullChecks": false in your tsconfig.json file.

Packages

The component library consists of the following packages:

Core

The Core package consists of almost all the basic React components like Avatar, Button, Input, List, Modal, etc.

Forms

The Form package lets you create dynamic forms using simple JSON.

Icons

The Icon package consists of the most commonly used SVG icons exposed as React components.

Layout

The Layout package consists of components that help in creating a page layout using side panels and nav items, which are exposed as React components.

Loaders

The Loaders package consists of a few simple SVG loaders exposed as React components.

Markdown

The Markdown package consists of a basic syntx guide which helps you format your content.

The Theme package defines the overall look, feel, and style of your website. Each component can be defined individually. For example, all icons of a website can be made solid, the color of all the components can be made orange, etc.

Utils

The Utils package consists of the most commonly used functionalities and components. E.g. String Helper has functions to convert a string to camelCase, case insensitive string comparison etc.