@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