Add the ability to specify the HTML tag the component should be rendered to.

Author: Daniel15

src/React.Tests/Core/ReactComponentTest.cs

@@ -63,6 +63,25 @@ public void RenderHtmlShouldWrapComponentInDiv()
 			Assert.AreEqual(@"<div id=""container"">[HTML]</div>", result);
 		}
 
+		[Test]
+		public void RenderHtmlShouldWrapComponentInCustomElement()
+		{
+			var config = new Mock<IReactSiteConfiguration>();
+			var environment = new Mock<IReactEnvironment>();
+			environment.Setup(x => x.Execute<bool>("typeof Foo !== 'undefined'")).Returns(true);
+			environment.Setup(x => x.Execute<string>(@"React.renderToString(Foo({""hello"":""World""}))"))
+				.Returns("[HTML]");
+
+			var component = new ReactComponent(environment.Object, config.Object, "Foo", "container")
+			{
+				Props = new { hello = "World" },
+				ContainerTag = "span"
+			};
+			var result = component.RenderHtml();
+
+			Assert.AreEqual(@"<span id=""container"">[HTML]</span>", result);
+		}
+
 		[Test]
 		public void RenderJavaScriptShouldCallRenderComponent()
 		{

src/React.Web.Mvc4/HtmlHelperExtensions.cs

@@ -35,14 +35,20 @@ private static IReactEnvironment Environment
 		/// <param name="htmlHelper">HTML helper</param>
 		/// <param name="componentName">Name of the component</param>
 		/// <param name="props">Props to initialise the component with</param>
+		/// <param name="htmlTag">HTML tag to wrap the component in. Defaults to &lt;div&gt;</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString React<T>(
 			this HtmlHelper htmlHelper, 
 			string componentName, 
-			T props
+			T props,
+			string htmlTag = null
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props);
+			if (!string.IsNullOrEmpty(htmlTag))
+			{
+				reactComponent.ContainerTag = htmlTag;
+			}
 			var result = reactComponent.RenderHtml();
 			return new HtmlString(result);
 		}

src/React/IReactComponent.cs

@@ -19,6 +19,21 @@ public interface IReactComponent
 		/// </summary>
 		object Props { get; set; }
 
+		/// <summary>
+		/// Gets or sets the name of the component
+		/// </summary>
+		string ComponentName { get; set; }
+
+		/// <summary>
+		/// Gets or sets the unique ID for the container of this component
+		/// </summary>
+		string ContainerId { get; set; }
+
+		/// <summary>
+		/// Gets or sets the HTML tag the component is wrapped in
+		/// </summary>
+		string ContainerTag { get; set; }
+
 		/// <summary>
 		/// Renders the HTML for this component. This will execute the component server-side and
 		/// return the rendered HTML.

src/React/ReactComponent.cs

@@ -38,14 +38,19 @@ public class ReactComponent : IReactComponent
 		private readonly IReactSiteConfiguration _configuration;
 
 		/// <summary>
-		/// Name of the component
+		/// Gets or sets the name of the component
 		/// </summary>
-		private readonly string _componentName;
+		public string ComponentName { get; set; }
 
 		/// <summary>
-		/// Unique ID for the DIV container of this component
+		/// Gets or sets the unique ID for the DIV container of this component
 		/// </summary>
-		private readonly string _containerId;
+		public string ContainerId { get; set; }
+
+		/// <summary>
+		/// Gets or sets the HTML tag the component is wrapped in
+		/// </summary>
+		public string ContainerTag { get; set; }
 
 		/// <summary>
 		/// Gets or sets the props for this component
@@ -64,8 +69,9 @@ public ReactComponent(IReactEnvironment environment, IReactSiteConfiguration con
 			EnsureComponentNameValid(componentName);
 			_environment = environment;
 			_configuration = configuration;
-			_componentName = componentName;
-			_containerId = containerId;
+			ComponentName = componentName;
+			ContainerId = containerId;
+			ContainerTag = "div";
 		}
 
 		/// <summary>
@@ -81,20 +87,20 @@ public string RenderHtml()
 				var html = _environment.Execute<string>(
 					string.Format("React.renderToString({0})", GetComponentInitialiser())
 					);
-				// TODO: Allow changing of the wrapper tag element from a DIV to something else
 				return string.Format(
-					"<div id=\"{0}\">{1}</div>",
-					_containerId,
-					html
-					);
+					"<{2} id=\"{0}\">{1}</{2}>",
+					ContainerId,
+					html,
+					ContainerTag
+				);
 			}
 			catch (JsRuntimeException ex)
 			{
 				throw new ReactServerRenderingException(string.Format(
 					"Error while rendering \"{0}\" to \"{2}\": {1}",
-					_componentName,
+					ComponentName,
 					ex.Message,
-					_containerId
+					ContainerId
 				));
 			}
 		}
@@ -110,7 +116,7 @@ public string RenderJavaScript()
 			return string.Format(
 				"React.render({0}, document.getElementById({1}))",
 				GetComponentInitialiser(),
-				JsonConvert.SerializeObject(_containerId, _configuration.JsonSerializerSettings) // SerializeObject accepts null settings
+				JsonConvert.SerializeObject(ContainerId, _configuration.JsonSerializerSettings) // SerializeObject accepts null settings
 			);
 		}
 
@@ -122,14 +128,14 @@ private void EnsureComponentExists()
 			// This is safe as componentName was validated via EnsureComponentNameValid()
 			var componentExists = _environment.Execute<bool>(string.Format(
 				"typeof {0} !== 'undefined'",
-				_componentName
+				ComponentName
 			));
 			if (!componentExists)
 			{
 				throw new ReactInvalidComponentException(string.Format(
 					"Could not find a component named '{0}'. Did you forget to add it to " +
 					"App_Start\\ReactConfig.cs?",
-					_componentName
+					ComponentName
 				));
 			}
 		}
@@ -143,7 +149,7 @@ private string GetComponentInitialiser()
 			var encodedProps = JsonConvert.SerializeObject(Props, _configuration.JsonSerializerSettings); // SerializeObject accepts null settings
 			return string.Format(
 				"{0}({1})",
-				_componentName,
+				ComponentName,
 				encodedProps
 			);
 		}