Border Divider component is used throughout the whole application to visible divide between the sections of the page.

You have the ability to customize this border according to your needs, using the following props:

• activeAreaAlignment - string to define where the active area should show. By default set to 'left', but also accepts 'right'

  • Default - 'left'
    • Accepts also 'right'
  • String

• activeAreaColor - active area color

  • Default - yellow
  • String

• activeAreaHeight - used for giving the active border part its own height. The active part in the example above would be the yellow part of the border.

  • Default - 1
  • Number

• activeAreaWidth - used for giving the active border part its own width.

  • Default - 68
  • Number

• containerBottomMargin - space from container's bottom to the component below.

  • Default - 20
  • Number

• containerTopMargin - space from container's top to the component above.

  • Default - 11
  • Number

• isActiveOnly - if set to true, will only display the active part only, otherwise component will also display the light grey the border on the remaining part of the width

  • Boolean
  • Default - false

• Example:

  <BorderDivider
  	containerTopMargin={12}
  	containerBottomMargin={20}
  	activeAreaAlignment={'left'}
  	activeAreaWidth={33}
  	isActiveOnly={true}
  	activeAreaHeight={1.5}
  />
  

  • src/components/AddressInformationFields.js