Power Apps Virtual React Shaking Text Code Component

In this article, we will create and deploy a React Power Apps “Shaking Text Control”. The “Shaking Text Control” can be used to draw attention to the text or to create a sense of urgency, importance, or excitement.

Note: This topic is based on the “React controls & platform libraries (Preview)” article and the topic is pre-release and is subject to change.

To create the “Shaking Text Component, we will use the React Component “reshake – https://www.npmjs.com/package/reshake” and use basic CSS  (Cascading Style Sheets) to define the styles and decorate the text.

Download the code component at link

Don’t like to read, follow the video tutorials at:


Now that we have our prerequisites in place let’s start building our Custom Code Component.

Creating a new component project

To create a new project: Open a command prompt window. Create a new folder for the project using the following command:

mkdir "Shaking Text Component"
  • Open your “Shaking Text PCF Component” folder inside Visual Studio Code.
  • Open a new terminal inside Visual Studio Code using Terminal -> New Terminal.
  • At the terminal prompt, create a new component project by passing basic parameters using the command.
pac pcf init -n ShakingText -ns ShakingTextNamespace -t field -fw react -npm

The above command also runs the npm install  for you to setup the project build tools.

Install the reshake npm packages

npm i reshake

Add a new file typings.d.ts in the root of the project and add the code.

declare module "reshake"

Implementing manifest

  • The control manifest is an XML file that contains the metadata of the code component. It also defines the behavior of the code component. In this tutorial, we will add “property elements”.

The completed manifest file should look like this:

<?xml version="1.0" encoding="utf-8" ?>
  <control namespace="ShakingTextNamespace" constructor="ShakingText" version="0.0.1" display-name-key="ShakingText" description-key="ShakingText description" control-type="virtual" >
    <external-service-usage enabled="false">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="dummytext" display-name-key="dummytext" description-key="dummytext" of-type="SingleLine.Text" usage="bound" required="false" />
    <property name="inputtext" display-name-key="inputtext" description-key="inputtext" of-type="SingleLine.Text" usage="input" required="true" />
    <property name="fontSize" display-name-key="fontSize" description-key="fontSize" of-type="SingleLine.Text" usage="input" required="true" />
    <property name="color" display-name-key="color" description-key="color" of-type="SingleLine.Text" usage="input" required="true"/>
      <code path="index.ts" order="1"/>
      <platform-library name="React" version="16.8.6" />
  • Save the changes to the ControlManifest.Input.xml file.

Implementing the Shaking component

Rename the existing “HelloWorld.tsx” to “ShakingComponent.tsx” file and update it will the code below:

import * as React from "react";
import { Shake } from "reshake"

export interface IShakerProps {
    textValue?: any;
export const MyShake = (props:IShakerProps) => (
          <Shake h={50} v={10} r={3} dur={400}>

Note: Renaming the file should also update all the “imports” in the index.ts file.

Adding the React component to the component logic

Open the index.ts file and Update the ShakingText class with the following code:

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { MyShake,IShakerProps }  from './ShakingComponent';
import * as React from "react";

export class ShakingText implements ComponentFramework.ReactControl<IInputs, IOutputs> {
    private theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;
    private notifyOutputChanged: () => void;
    public _context: ComponentFramework.Context<IInputs>;
    private text: any;
    public shakerProps:IShakerProps;
     * Empty constructor.
    constructor() { }

     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
     * Data-set values are not initialized here, use updateView.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
     * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary
    ): void {
        this.notifyOutputChanged = notifyOutputChanged;
            MyShake, {...this.shakerProps}  

     * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
     * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
     * @returns ReactElement root react element for the control
    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
        if(context.parameters.inputtext != null)
        this.shakerProps = 
        return React.createElement(
            MyShake, {...this.shakerProps}  

     * It is called by the framework prior to a control receiving new data.
     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
    public getOutputs(): IOutputs {
        return { };

     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
     * i.e. cancelling any pending remote calls, removing listeners, etc.
    public destroy(): void {
        // Add code to cleanup control if necessary

Build your code component and Debugging your code component

npm run build

npm start watch

Packaging your code components

  • Create a new folder named Solutions inside the Solutions folder and navigate into the folder.
  • Create a new solution project in the Solution folder using the pac solution init command:
pac solution init --publisher-name developer --publisher-prefix dev

Once the new solution project is created, refer the Solutions folder to the location where the created sample component is located. You can add the reference

pac solution add-reference --path c:\downloads\mysamplecomponent

To generate a zip file from the solution project, go into your solution project directory and build the project using the following command.

msbuild /t:build /restore

Manually import the solution into Dataverse using the web portal

Subscribe to this blog for the latest updates about SharePoint Online, Nintex, Microsoft Flow, Power Apps, and document conversion and manipulation.

2 thoughts on “Power Apps Virtual React Shaking Text Code Component

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s