Customizing Views

React Devise provides three ways to customize views:

• configure the default view plugin
• customize built-in views with custom view plugins
• replace some or all of the built-in views with custom views

Configure the Default View Plugin

initReactDevise({
  // other config
  defaultViewPluginSettings: {
    formProps = {
      className: 'my-auth-form'
    },
    fieldErrorProps = {
      style: {
        fontWeight: 'bold'
      }
    },
    fieldWarningProps = {
      style: {
        fontWeight: 'bold'
      }
    },
  }
});

To see the available settings, look at the default plugin.

Customize Built-In Views with Plugins

The following example uses the react-devise-material-ui plugin in combination with a custom plugin.

import ReactDeviseMaterialUI from 'react-devise-material-ui';
import {Form, Alert, UnstyledList, AuthListItem, FormError, AuthHeading, AuthViewContainer} from '../components';

const myCustomPlugin = {
  Form,
  FormError,
  Alert,
  AuthLinksList: UnstyledList,
  AuthLinksListItem: AuthListItem,
  Heading: AuthHeading,
  View: AuthViewContainer
};

initReactDevise({
  // other config
  viewPlugins: [
    ReactDeviseMaterialUI.plugin(),
    myCustomPlugin
  ]
});

View plugins are merged in order after the default plugin. So in the code sample above, myCustomPlugin supersedes ReactDeviseMaterialUI plugin, which in turn supersedes the default plugin.

To understand how a plugin is constructed is, look at React Devise's default plugin.

Using With Styled Components

React Devise plays nicely with styled-components. For example, UnstlyedList (in the prior code sample) might be:

import styled from 'styled-components';

const UnstyledList = styled.ul`
  list-style: none;
  padding: 0;
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
`;

export default UnstyledList;

Custom Views

You can replace any or all built-in views with custom views. Specify custom views in the routes configuration. In the following example, MyFancySignupForm is a custom component that you have created in your app.

import {MyFancySignupForm} from '../components';

initReactDevise({
  // other config
  routes: {
    signup: {
      component: MyFancySignupForm
    }
  }
});

To customize views, consider copy-pasting the built-in views as a starting point.

NEXT: Accessing Current User Components >