components-extra

React UI molecule components based on Material-UI & styled-components.

Thank you for using components-extra ❤. Here you will learn how to set up in 2 minutes the lib inside your app.

Get started

Prerequisites

Before anything, please make sure to have the three following packages installed:

Step 1

components-extra relies on both Material-UI's theme configuration as well as the styled-components theming system.

The first step consists into wrapping your web application in components-extra's default theme provider <StyledProvider>:

import React from 'react'
import { StyledProvider } from 'components-extra'

const App = () => {
  return (
    <StyledProvider>
      <p>Simple, is it not ?</p>
    </StyledProvider>
  )
}

Note: The StyledProvider will forward the theme object to all the children recursively. Not using this Provider above the other components will result in an JS error, and you will not be able to access the theme.

Step 2

Import the component you want to use. For example, the <BackToTop> button:

import React from 'react'
import { BackToTop, StyledProvider } from 'components-extra'

const App = () => {
  return (
    <StyledProvider>
      <BackToTop />
    </StyledProvider>
  )
}

And voilà! you're all set and ready to create your website's interface.

Fonts

Like Material-UI, the components all use Roboto font-familly as their main option, but it is not included in components-extra to provide more freedom to the developers.

You have to manually use the following CDN link to include the Roboto font in your application:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Note: adding this stylesheet in the <head> of your page will fetch it in a synchronous way. There are multiple techniques to fetch it asynchronously to improve the performances of your app.