@sakit-sa/react-master-detail NPM

@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.

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.