Allow a custom container ID to be provided. Closes #50

Author: Daniel15

src/React.Tests/Core/ReactEnvironmentTest.cs

@@ -8,6 +8,8 @@
  */
 
 using System;
+using System.Collections.Generic;
+using System.Linq;
 using JavaScriptEngineSwitcher.Core;
 using Moq;
 using NUnit.Framework;
@@ -66,6 +68,32 @@ public void ExecuteWithLargerStackIfRequiredShouldBubbleExceptions()
 			});
 		}
 
+		[Test]
+		public void GeneratesContainerIdIfNotProvided()
+		{
+			var mocks = new Mocks();
+			var environment = mocks.CreateReactEnvironment();
+			mocks.Config.Setup(x => x.Scripts).Returns(new List<string>());
+
+			var component1 = environment.CreateComponent("ComponentName", new { });
+			var component2 = environment.CreateComponent("ComponentName", new { });
+			Assert.AreEqual("react1", component1.ContainerId);
+			Assert.AreEqual("react2", component2.ContainerId);
+		}
+
+		[Test]
+		public void UsesProvidedContainerId()
+		{
+			var mocks = new Mocks();
+			var environment = mocks.CreateReactEnvironment();
+			mocks.Config.Setup(x => x.Scripts).Returns(new List<string>());
+
+			var component1 = environment.CreateComponent("ComponentName", new { }, "foo");
+			var component2 = environment.CreateComponent("ComponentName", new { });
+			Assert.AreEqual("foo", component1.ContainerId);
+			Assert.AreEqual("react1", component2.ContainerId);
+		}
+
 		private class Mocks
 		{
 			public Mock<IJsEngine> Engine { get; private set; }

src/React.Web.Mvc4/HtmlHelperExtensions.cs

@@ -36,15 +36,17 @@ private static IReactEnvironment Environment
 		/// <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>
+		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
 		/// <returns>The component's HTML</returns>
 		public static IHtmlString React<T>(
 			this HtmlHelper htmlHelper, 
 			string componentName, 
 			T props,
-			string htmlTag = null
+			string htmlTag = null,
+			string containerId = null
 		)
 		{
-			var reactComponent = Environment.CreateComponent(componentName, props);
+			var reactComponent = Environment.CreateComponent(componentName, props, containerId);
 			if (!string.IsNullOrEmpty(htmlTag))
 			{
 				reactComponent.ContainerTag = htmlTag;

src/React/IReactEnvironment.cs

@@ -81,8 +81,9 @@ public interface IReactEnvironment
 		/// <typeparam name="T">Type of the props</typeparam>
 		/// <param name="componentName">Name of the component</param>
 		/// <param name="props">Props to use</param>
+		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
 		/// <returns>The component</returns>
-		IReactComponent CreateComponent<T>(string componentName, T props);
+		IReactComponent CreateComponent<T>(string componentName, T props, string containerId = null);
 
 		/// <summary>
 		/// Renders the JavaScript required to initialise all components client-side. This will 

src/React/ReactEnvironment.cs

@@ -291,12 +291,17 @@ public virtual bool HasVariable(string name)
 		/// <typeparam name="T">Type of the props</typeparam>
 		/// <param name="componentName">Name of the component</param>
 		/// <param name="props">Props to use</param>
+		/// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
 		/// <returns>The component</returns>
-		public virtual IReactComponent CreateComponent<T>(string componentName, T props)
+		public virtual IReactComponent CreateComponent<T>(string componentName, T props, string containerId = null)
 		{
 			EnsureUserScriptsLoaded();
-			_maxContainerId++;
-			var containerId = string.Format(CONTAINER_ELEMENT_NAME, _maxContainerId);
+			if (string.IsNullOrEmpty(containerId))
+			{
+				_maxContainerId++;
+				containerId = string.Format(CONTAINER_ELEMENT_NAME, _maxContainerId);	
+			}
+			
 			var component = new ReactComponent(this, _config, componentName, containerId)
 			{
 				Props = props