Dynamic component tag name

Universal Dashboard UD Development
1

So looking at https://www.react-spinners.com/ and can successfully build a component…however you have to hardcode the tag name as in:-
<ClipLoader
css={override}
sizeUnit={“px”}
size={150}
color={’#123abc’}
loading={this.state.loading}
/>
So that tag <ClipLoader is loaded from
import ClipLoader from ‘react-spinners/ClipLoader’;
So if I import all the different spinners…how can you then make it like:-
const TagName = this.props.tag;
return(
<TagName
css={override}
sizeUnit={“px”}
size={150}
color={’#123abc’}
loading={this.state.loading}
/>
);
However nothing happens on the page as in it’s completely blank when loaded instead of showing the prop I tried to pass in…hope this makes sense on what I am trying to achieve? So like with those kawaii svg I did a module per svg…so how can I bundle this spinner component to allow dynamic selection of spinner?
Or how would one go about implementing the first demo shown here to then reimport the custom component>? https://gist.github.com/mpolinowski/be444c52280598752a408b9e9b3de123

2

You can use React.createElement to do this. Maybe put the loaders into a hashtable and then pass the tag name into the indexer for the hashtable to get the correct component function.

import ClipLoader from ‘react-spinners/ClipLoader’;
const loaders = {
    ClipLoader 
}
React.createElement(loaders[this.props.tagName], this.props)
2 Likes
3

seriously man I cannot thank you enough @adam pretty much my whole weekend was spent banging my head against a brick wall trying to get this to work.

4

Honestly thanks again @adam ended up with the following JSX script:-

import React from 'react';
import { BallSpinner } from "react-spinners-kit";
import { BarsSpinner } from "react-spinners-kit";
import { CircleSpinner } from "react-spinners-kit";
import { CubeSpinner } from "react-spinners-kit";
import { DominoSpinner } from "react-spinners-kit";
import { FillSpinner } from "react-spinners-kit";
import { FireworkSpinner } from "react-spinners-kit";
import { FlagSpinner } from "react-spinners-kit";
import { GridSpinner } from "react-spinners-kit";
import { GuardSpinner } from "react-spinners-kit";
import { HeartSpinner } from "react-spinners-kit";
import { ImpulseSpinner } from "react-spinners-kit";
import { PulseSpinner } from "react-spinners-kit";
import { PushSpinner } from "react-spinners-kit";
import { SequenceSpinner } from "react-spinners-kit";
import { SphereSpinner } from "react-spinners-kit";
import { SpiralSpinner } from "react-spinners-kit";
import { StageSpinner } from "react-spinners-kit";
import { SwapSpinner } from "react-spinners-kit";
import { WaveSpinner } from "react-spinners-kit";
import { ClapSpinner } from "react-spinners-kit";
import { RotateSpinner } from "react-spinners-kit";
import { SwishSpinner } from "react-spinners-kit";
import { GooSpinner } from "react-spinners-kit";
import { CombSpinner } from "react-spinners-kit";
import { PongSpinner } from "react-spinners-kit";
import { RainbowSpinner } from "react-spinners-kit";
import { RingSpinner } from "react-spinners-kit";
import { HoopSpinner } from "react-spinners-kit";
import { FlapperSpinner } from "react-spinners-kit";
import { MagicSpinner } from "react-spinners-kit";
import { JellyfishSpinner } from "react-spinners-kit";
import { TraceSpinner } from "react-spinners-kit";
import { ClassicSpinner } from "react-spinners-kit";
import { MetroSpinner } from "react-spinners-kit";
import { WhisperSpinner } from "react-spinners-kit";
class <%=$PLASTER_PARAM_ControlName%> extends React.Component {

  // state is for keeping control state before or after changes.
  state = {

    // the things you want to put in state.
    // text: this.props.text //un comment the line to use state insted props
  }
constructor(props) {
        super(props);
        this.state = {
          loading: true,
        };
    this.size = {
      size: this.props.size
    };
    this.state.color = {
      color: this.props.color
    };
    this.state.frontColor = {
      frontColor: this.props.color
    };
     this.state.backColor = {
      backColor: this.props.color
    };
    }

  render() {
    const { loading } = this.state;
    const loaders = {
BallSpinner,
BarsSpinner,
CircleSpinner,
CubeSpinner,
DominoSpinner,
FillSpinner,
FireworkSpinner,
FlagSpinner,
GridSpinner,
GuardSpinner,
HeartSpinner,
ImpulseSpinner,
PulseSpinner,
PushSpinner,
SequenceSpinner,
SphereSpinner,
SpiralSpinner,
StageSpinner,
SwapSpinner,
WaveSpinner,
ClapSpinner,
RotateSpinner,
SwishSpinner,
GooSpinner,
CombSpinner,
PongSpinner,
RainbowSpinner,
RingSpinner,
HoopSpinner,
FlapperSpinner,
MagicSpinner,
JellyfishSpinner,
TraceSpinner,
ClassicSpinner,
MetroSpinner,
WhisperSpinner
    }
      // These props are returned from PowerShell!
      // return <h1>{this.state.text}</h1> // un comment the line to render using value from state.

      return React.createElement(loaders[this.props.tagName], this.props)
  }
}

export default <%=$PLASTER_PARAM_ControlName%>

Will be adding this to the market place very soon, thanks for showing me the light, there was no way I wanted to do all these as individual components…now I have seen the light I might apply this techinique to the Kawaii SVG images I did, and only have one module for all of them :grinning:

2 Likes