Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexboia/lvd-fluentui-propertysheet

A ReactJS property sheet component built using the FluentUI library.
https://github.com/alexboia/lvd-fluentui-propertysheet

fluentui fluentui-component fluentui-property-sheet property-sheets react reactjs reactjs-components

Last synced: about 2 months ago
JSON representation

A ReactJS property sheet component built using the FluentUI library.

Awesome Lists containing this project

README 

        
# LVD-FluentUi-PropertySheet



[![NPM](https://nodei.co/npm/lvd-fluentui-propertysheet.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/lvd-fluentui-propertysheet/)



A ReactJS property sheet component built using the [FluentUI library](https://github.com/microsoft/fluentui).

What this basically does is display key-value data, with some additional features:



- allow value rendering as a `` fragment;

- supports value rendering as a link, by providing an url property;

- supports rendering an action icon button next to the value, by providing an action code and icon;

- supports custom label rendering;

- supports configurable label alignment;

- supports custom value rendering.





	




## Installation




`npm install --save lvd-fluentui-propertysheet`



## Demo




The `demo` directory contains [a compiled and ready-to-run example](https://github.com/alexboia/LVD-FluentUi-PropertySheet/tree/main/demo). Just open up the index.html file.



## Basic Usage




```javascript

import React from 'react';

import { PropertySheet, PropertySheetLabelAlignments } from 'lvd-fluentui-propertysheet';



class PropertySheetSamplePage extends React.Component {

	constructor(props) {

		super(props);

	}



	render() {

		return (

			


				

			


		);

	}



	_getSampleItems() {

		return [

			{ label: 'Test 1', value: 'Value 1' },

			{ label: 'Test 2', value: 'Value 2', formatAsCode: true },

			{ label: 'Test 3', value: 'Value 3', url: 'http://alexboia.net' },

			{ label: 'Test 4', value: 'Value 4', action: { code: 'Edit', icon: 'Edit' } },

			{ label: 'Test 5', value: 'Value 5' }

		];

	}

}

```



You can find a full working example [here](https://github.com/alexboia/LVD-FluentUi-PropertySheet/blob/main/src/App.jsx).



## Styling




You can either directly include the `dist/style.css` into your `html` web page or use the `@import` directive inside your stylesheet if building using webpack:



```css

@import '~lvd-fluentui-propertysheet/dist/style.css';

```



Also see [the component itself](https://github.com/alexboia/LVD-FluentUi-PropertySheet/blob/main/src/components/PropertySheet.jsx).



## Building




To build the demo application: 



```

npm run build-app

```



To build the library: 



```

npm run build-dist

```



To build both in one sitting: 



```

npm run build

```



## Customization Options




| What | Prop Name | Type | Notes |

| --- | --- | --- | --- |

| Set items | `items` | `Property Sheet Data Item Object` | See below. Mandatory. |

| Set additional container css class name | `className` | `string` | Defaults to `null`. |

| Set additional inline css style properties | `style` | `object` | Key-value plain javascript object. Defaults to `{}`. |

| Only show label fields | `labelOnly` | `boolean` | Defaults to false. |

| Change label alignment | `labelAlignment` | `PropertySheetLabelAlignments` | See [here for all supported values](https://github.com/alexboia/LVD-FluentUi-PropertySheet/blob/main/src/components/PropertySheetLabelAlignments.js). Defaults to `PropertySheetLabelAlignments.right`. |

| Display underlines for values that are rendered as links | `underlineValueLinks` | `boolean` | Defaults to `false`. |

| Provide custom label renderer | `onRenderLabel` | `(item: Property Sheet Data Item Object, itemIndex: number) => JSX.Element` | Defaults to `null`. |

| Provide custom value renderer | `onRenderValue` | `(item: Property Sheet Data Item Object, itemIndex: number) => JSX.Element` | Defaults to `null`. |



### Property Sheet Data Item Object



Each item must be a plain javascript object with the following properties:



| Name | Type | Notes |

| --- | --- | --- |

| `label` | `string` | Displayable label. Mandatory. |

| `value` | `string` | Displayable value. Optional. |

| `formatAsCode` | `boolean` | Render this item as a code block. Optional. Defaults to `false` |

| `url` | `string` | Render this item as a link with this url. Optional. Defaults to `null` |

| `action` | `Property Sheet Data Item Action Object` | Action descriptor for when an action icon button needs to be rendered next to the raw value. See below. Optional. Defaults to `null`. |



### Property Sheet Data Item Action Object



Each item action descriptor must be a plain javascript object with the following properties:



| Name | Type | Notes |

| --- | --- | --- |

| `code` | `string` | Action code. Can be later used when listening for actions via `onValueItemActionInvoked`. Mandatory. |

| `icon` | `string` | Must be a valid FluentUi icon name. Mandatory. |



## Events




| Event | Prop Name | Arguments | Notes |

| --- | --- | --- | --- |

| Item action invoked | `onValueItemActionInvoked` | `(item: Property Sheet Data Item Object, itemIndex: number, event: React.MouseEvent)` | Triggered when the action button related to a value is clicked. |



## Changelog




### Version 0.0.1



- First tracked version.



## Donate




I put some of my free time into developing and maintaining this plugin.

If helped you in your projects and you are happy with it, you can...



[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Q5Q01KGLM)