@hansevision/spfx-2019-controls

A standalone, reusable React component for rendering different controls in SharePoint Framework (SPFx) solutions. Currently the project provides following controls:

• a web part title

Installation

npm install @hansevision/spfx-2019-controls

Peer Dependencies

| Package | Version | | ----------- | ---------- | | react | >=16.8.0 | | react-dom | >=16.8.0 |

Usage

In an SPFx web part

import { WebPartTitle } from '@hansevision/spfx-2019-controls';
import { DisplayMode } from '@microsoft/sp-core-library';

// In your render method:
<WebPartTitle
  displayMode={this.props.displayMode}
  title={this.properties.title}
  updateProperty={(value: string) => {
    this.properties.title = value;
  }}
  placeholder="Enter a title..."
/>;

Props

| Prop | Type | Required | Default | Description | | ---------------- | ------------------------- | -------- | ---------------------------------------------------------------------- | ----------------------------------------------- | | displayMode | DisplayMode | ✅ | — | DisplayMode.Read or DisplayMode.Edit. | | title | string | ✅ | — | The title text. | | updateProperty | (value: string) => void | ❌ | — | Callback when the title changes in edit mode. | | className | string | ❌ | — | Additional CSS class on the outer container. | | placeholder | string | ❌ | "Webpart Title" or "Webpart Titel" depending on the browser language | Textarea placeholder in edit mode. | | moreLink | JSX.Element | ❌ | — | Element rendered to the right of the title. | | children | ReactNode | ❌ | — | Children rendered below the title in read mode. |

Development

For static testing:

# Install dependencies (in SPFx 2019 Controls Project)
npm ci

# Build the package (in SPFx 2019 Controls Project)
npm run build

# Create Package: hansevision-spfx-2019-controls-1.0.0.tgz (in SPFx 2019 Controls Project)
npm run package

# in the consuming project
npm install ../your-custom-folder/hansevision-spfx-2019-controls-1.0.0.tgz

For live-reloading testing:

# In SPFx 2019 Controls Project
npm link

# In the consuming project
npm link @hansevision/spfx-2019-controls

# In SPFx 2019 Controls Project
npm run build:watch

The build outputs to dist/:

• dist/index.js — CommonJS bundle
• dist/index.esm.js — ES module bundle
• dist/index.d.ts — TypeScript declarations