DEMO React components based on material.io guidelines handcoded by a normal non-google developer.

Why choose this package

Have you ever wanted to create a website using material design and tried Material-UI? Let's be honest, that package is hard to use, especially if you want to style it your own way, and that's exactly why I've decided to create a similar package that resembles Google's Material Design, but with simple, basic features.

Installation

You can download react-md-components as an npm package.

npm install react-md-components

or

yarn add react-md-components

Usage

All components are exported through the main index.js (I haven't accomplished yet to set it as a flat package); You can find some examples in the docs:

Components

MDDivider

Properties

    MDDivider.primeryColor: string, default: '#000' \\ this defines the color of the divider.

Reference: material.io/components/dividers/

MDCard

Properties

    MDCard.dark: bool, default: false \\ this defines whether the card must use dark mode.
    MDCard.media: string, default: '' \\ this defines the media included in the card. This version only supports images.
    MDCard.title: string, default: '' !required \\ this defines the title of the card. Deprecates MDCardTitle.
    MDCard.subtitle: string, default: '' \\ this defines the secondary text of the card. Deprecates MDCardSubtitle.
    MDCard.accentColor: string, default: '' \\ this defines the accent color of the action buttons.
    MDCard.actions: ArrayOf(Action), default: [] \\ this defines the actions at the bottom of the card.

Actions

    Action.title: string,
    Action.onClick: function

    // e.g:
    {
        title: 'Open github',
        onClick: () => {
            window.open('https://www.github.com/xNicklaj/react-md-components');
        }
    }

MDCardSection

This component has no attributes other than its children.

Full example

    <MDCard 
        media='https://images7.alphacoders.com/909/909467.jpg'
        title='Title goes here'
        subtitle='Secondary text'
        actions={[
            {
                title: 'button'
            },
            {
                title: 'button'
            }
        ]}
    >
        <MDCardSection>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</MDCardSection>
        <MDCardSection>Tags: <b>#reactjs</b></MDCardSection>
        <MDDivider />
    </MDCard>

Reference: material.io/components/cards/

MDButton

Properties

    MDButton.outlined: bool, default: false \\ this makes the button assume an outlined style.
    MDButton.text: bool, default: false \\ this makes the button assume a text-only style.
    MDButton.accentColor: string, default: '' \\ this defines the accent color of the component.
    MDButton.type: string, default: 'button' \\ this defines the type of the button. Check MDN References for more informations on the type attribute of a button.
    MDButton.name: string, default: '' \\ this defines the name of the button.
    MDButton.form: string, default: '' \\ this defines the form the button is linked to.
    MDButton.disabled: bool, default: false \\ this defines whether tthe button is disabled or not.

    Note: the default style will be condensed. To select this, avoid using .text or .outlined.
    Note: only use either .text or .outlined.

Reference: material.io/components/buttons/

MDTextField

Properties

    MDTextField.outlined: bool, default: false \\ this makes the textfield assume an outlined style.
    MDTextField.error: bool, default: false \\ this defines whether the textfield must assume an error identity.
    MDTextField.type: string, default: 'text' \\ this defines the type of the input field.
    MDTextField.accentColor: string, default: '' \\ this defines the accent color of the component.
    MDTextField.name: string, default: '' \\ this defines the name of the textfield in the dom.
    MDTextField.value: string, default: '' \\ this defines the default value of the text field.
    MDTextField.disabled: true, default: false \\ this defines the disabled attribute of the input field.

Reference: material.io/components/textfields/

TO-DO

• MDFloatingButton: this component is still in beta and its documentation will be released upon its completion.
• MDBanners
• Chips
• Fix: dynamic child assignment in cards not working.

License

This library is using MIT License.