ContainerClass

Add possibility to add class to container tag.

Author: jovnas

src/React.AspNet/HtmlHelperExtensions.cs

@@ -68,6 +68,7 @@ private static IReactEnvironment Environment
 		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
 		/// <param name="clientOnly">Skip rendering server-side and only output client-side initialisation code. Defaults to <c>false</c></param>
 		/// <param name="serverOnly">Skip rendering React specific data-attributes during server side rendering. Defaults to <c>false</c></param>
+		/// <param name="containerClass">HTML class(es) to set on the container tag</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString React<T>(
 			this IHtmlHelper htmlHelper,
@@ -76,14 +77,19 @@ public static IHtmlString React<T>(
 			string htmlTag = null,
 			string containerId = null,
 			bool clientOnly = false,
-			bool serverOnly = false
+			bool serverOnly = false,
+			string containerClass = null
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
 			if (!string.IsNullOrEmpty(htmlTag))
 			{
 				reactComponent.ContainerTag = htmlTag;
 			}
+			if (!string.IsNullOrEmpty(containerClass))
+			{
+				reactComponent.ContainerClass = containerClass;
+			}
 			var result = reactComponent.RenderHtml(clientOnly, serverOnly);
 			return new HtmlString(result);
 		}
@@ -100,21 +106,27 @@ public static IHtmlString React<T>(
 		/// <param name="htmlTag">HTML tag to wrap the component in. Defaults to &lt;div&gt;</param>
 		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
 		/// <param name="clientOnly">Skip rendering server-side and only output client-side initialisation code. Defaults to <c>false</c></param>
+		/// <param name="containerClass">HTML class(es) to set on the container tag</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString ReactWithInit<T>(
 			this IHtmlHelper htmlHelper,
 			string componentName,
 			T props,
 			string htmlTag = null,
 			string containerId = null,
-            bool clientOnly = false
+            bool clientOnly = false,
+			string containerClass = null
 		)
 		{
 			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
 			if (!string.IsNullOrEmpty(htmlTag))
 			{
 				reactComponent.ContainerTag = htmlTag;
 			}
+			if (!string.IsNullOrEmpty(containerClass))
+			{
+				reactComponent.ContainerClass = containerClass;
+			}
 			var html = reactComponent.RenderHtml(clientOnly);
 
 #if LEGACYASPNET

src/React.Core/IReactComponent.cs

@@ -34,6 +34,11 @@ public interface IReactComponent
 		/// </summary>
 		string ContainerTag { get; set; }
 
+		/// <summary>
+		/// Gets or sets the HTML class for the container of this component
+		/// </summary>
+		string ContainerClass { get; set; }
+
 		/// <summary>
 		/// Renders the HTML for this component. This will execute the component server-side and
 		/// return the rendered HTML.

src/React.Core/ReactComponent.cs

@@ -52,6 +52,11 @@ public class ReactComponent : IReactComponent
 		/// </summary>
 		public string ContainerTag { get; set; }
 
+		/// <summary>
+		/// Gets or sets the HTML class for the container of this component
+		/// </summary>
+		public string ContainerClass { get; set; }
+
 		/// <summary>
 		/// Gets or sets the props for this component
 		/// </summary>
@@ -94,12 +99,19 @@ public virtual string RenderHtml(bool renderContainerOnly = false, bool renderSe
 						: string.Format("ReactDOMServer.renderToString({0})", GetComponentInitialiser());
 					html = _environment.Execute<string>(reactRenderCommand);
 				}
+
+				string attributes = string.Format("id=\"{0}\"", ContainerId);
+				if (!string.IsNullOrEmpty(ContainerClass))
+				{
+					attributes += string.Format(" class=\"{0}\"", ContainerClass);
+				}
+
 				return string.Format(
-					"<{2} id=\"{0}\">{1}</{2}>",
-					ContainerId,
+					"<{2} {0}>{1}</{2}>",
+					attributes,
 					html,
 					ContainerTag
-				);
+					);
 			}
 			catch (JsRuntimeException ex)
 			{

src/React.Tests/Core/ReactComponentTest.cs

@@ -117,6 +117,25 @@ public void RenderHtmlShouldWrapComponentInCustomElement()
 			Assert.AreEqual(@"<span id=""container"">[HTML]</span>", result);
 		}
 
+		[Test]
+		public void RenderHtmlShouldAddClassToElement()
+		{
+			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>(@"ReactDOMServer.renderToString(React.createElement(Foo, {""hello"":""World""}))"))
+				.Returns("[HTML]");
+
+			var component = new ReactComponent(environment.Object, config.Object, "Foo", "container")
+			{
+				Props = new { hello = "World" },
+				ContainerClass="test-class"
+			};
+			var result = component.RenderHtml();
+
+			Assert.AreEqual(@"<div id=""container"" class=""test-class"">[HTML]</div>", result);
+		}
+
 		[Test]
 		public void RenderJavaScriptShouldCallRenderComponent()
 		{