Add support for React elements for Steps intro

Author: HiDeoo

CHANGELOG.md

@@ -1,3 +1,7 @@
+## Unreleased
+
+* Add support for React elements to Steps's `intro` parameter.
+
 ## 0.2.0
 
 * 💥 `onBeforeChange` is no longer called with the `nextElement` parameter.

README.md

@@ -106,7 +106,7 @@ const steps = [
 | Name | Description | Type | Required |
 | --- | --- | :---: | :---: |
 | `element` | CSS selector to use for the step. | String | |
-| `intro` | The tooltip text. | String | ✅ |
+| `intro` | The tooltip content. | String \| React element | ✅ |
 | `position` | Position of the tooltip. | String | |
 | `tooltipClass` | CSS class of the tooltip. | String | |
 | `highlightClass` | CSS class of the helperLayer. | String |  |  |

src/components/Steps/index.js

@@ -1,6 +1,7 @@
 import introJs from 'intro.js';
 import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, isValidElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 import * as introJsPropTypes from '../../helpers/proptypes';
 import * as introJsDefaultProps from '../../helpers/defaultProps';
@@ -19,7 +20,7 @@ export default class Steps extends Component {
     steps: PropTypes.arrayOf(
       PropTypes.shape({
         element: PropTypes.string,
-        intro: PropTypes.string.isRequired,
+        intro: PropTypes.node.isRequired,
         position: introJsPropTypes.tooltipPosition,
         tooltipClass: PropTypes.string,
         highlightClass: PropTypes.string,
@@ -232,7 +233,18 @@ export default class Steps extends Component {
   configureIntroJs() {
     const { options, steps } = this.props;
 
-    this.introJs.setOptions({ ...options, steps });
+    const sanitizedSteps = steps.map(step => {
+      if (isValidElement(step.intro)) {
+        return {
+          ...step,
+          intro: renderToStaticMarkup(step.intro),
+        };
+      }
+
+      return step;
+    });
+
+    this.introJs.setOptions({ ...options, steps: sanitizedSteps });
 
     this.isConfigured = true;
   }

src/components/Steps/index.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 
@@ -24,6 +25,22 @@ describe('Steps', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  test('should render a React element using renderToStaticMarkup', () => {
+    const Element = () => <div>react test</div>;
+
+    const spy = jest.spyOn(ReactDOMServer, 'renderToStaticMarkup');
+
+    const wrapper = shallow(
+      <Steps initialStep={0} steps={[{ element: '.test', intro: <Element /> }]} onExit={() => {}} />,
+      {
+        lifecycleExperimental: true,
+      }
+    );
+    wrapper.setProps({ enabled: true });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
   test('should not call the onStart callback at mount time if not enabled', () => {
     const onStart = jest.fn();