@sakit-sa/react-master-detail

Simple, easy master-detail for React

Live Playground

For examples of the react-master-detail in action, go to https://abdilar.github.io/react-master-detail.

OR

To run that demo on your own computer:

• Clone this repository
• npm install
• npm run storybook
• Visit http://localhost:6006/

Getting Started

Install

npm install @sakit-sa/react-master-detail

Usage

import React from 'react';

import MasterDetail from '@sakit-sa/react-master-detail';
import '@sakit-sa/react-master-detail/dist/index.css';

const App = () => (
  <MasterDetail>
    <div>
      <div>Master header</div>
      <div>Master body</div>
    </div>
    <div>
      <div>Detail header</div>
      <div>Detail body</div>
    </div>
  </MasterDetail>
);

Props

Name	Type	Default	Description
adjustable	boolean	true	Boolean value to control whether can adjust the master and the detail sections.
canClose	boolean	true	Boolean value to control whether can close detail section.
centerAlign	boolean	true	Boolean value to control whether can aligns master section in the center.
className	object	{}	Apply a className to the control
defaultMasterWidth	number	600px	Set initial width of master section.
detailMinWidth	string number object	550px	Set minimum width of detail section.
direction	string	ltr	Is the master-detail direction (right-to-left or left-to-right)
id	string	master-detail-[randomNumber(10000)]	The unique identifier for the component.
masterMinWidth	string number object	400px	Set minimum width of master section.
masterWidth	string number object	600px	Set width of master section.
noDetail	boolean	false	Boolean value to control whether to show details section (Affects showDetail property).
renderAdjustIcon	element	<i className="icon-align" />	Custom adjust icon
renderCloseIcon	element	<i className="icon-close" />	Custom close icon
showDetail	boolean	true	Boolean value to control whether show detail section.
onClose	function	-	Trigger when detail section closed.

className Token

align alignIcon detail detailBody detailHeader detailWrapper masterBody masterHeader masterWrapper wrapper

See examples for more information (go to https://abdilar.github.io/react-master-detail/?path=/story/theme--class-name)

masterWidth Token

Type	Description	example
number	Based on px	masterWidth={500}
string	Either based on percentage or based on pixel	masterWidth="30%" masterWidth="500px"
object	For responsive mode	masterWidth = { xxdt: "40%", xdt: "400px", dt: 300, mdt: 200 };

masterMinWidth Token

Type	Description	example
number	Based on px	masterMinWidth={500}
string	Either based on percentage or based on pixel	masterMinWidth="30%" masterWidth="500px"
object	For responsive mode	masterMinWidth = { xxdt: "40%", xdt: "400px", dt: 300, mdt: 200 };

detailMinWidth Token

Type	Description	example
number	Based on px	detailMinWidth={500}
string	Either based on percentage or based on pixel	detailMinWidth="30%" masterWidth="500px"
object	For responsive mode	detailMinWidth = { xxdt: "40%", xdt: "400px", dt: 300, mdt: 200 };

Responsive Mode Tips

xxdt: Affects device widths of 1920px and larger.
xdt: Affects device widths of 1600px and larger.
dt: Affects device widths of 1200px and larger.
mdt: Affects device widths of 960px and larger.

License

MIT © Saeed Abdilar