diff --git a/__tests__/index.test.jsx b/__tests__/index.test.jsx
index 0b1a21f..3e9ae8d 100644
--- a/__tests__/index.test.jsx
+++ b/__tests__/index.test.jsx
@@ -36,6 +36,13 @@ describe('single variable', () => {
     expect(container).toHaveTextContent('APIKEY');
   });
 
+  it('should allow the use of "name" as a prop', () => {
+    const { variable, ...rest } = props;
+    const { container } = render(<Variable {...rest} name="apiKey" />);
+
+    expect(container).toHaveTextContent('123456');
+  });
+
   it('should render auth dropdown if default and oauth enabled', () => {
     const { container } = render(
       <Variable {...props} defaults={[{ name: 'apiKey', default: 'default' }]} oauth user={{}} />,
diff --git a/index.jsx b/index.jsx
index efe490e..ce7ce21 100644
--- a/index.jsx
+++ b/index.jsx
@@ -11,6 +11,7 @@ class Variable extends React.Component {
     super(props);
     this.state = { showDropdown: false };
 
+    this.getName = this.getName.bind(this);
     this.toggleVarDropdown = this.toggleVarDropdown.bind(this);
     this.toggleAuthDropdown = this.toggleAuthDropdown.bind(this);
     this.renderVarDropdown = this.renderVarDropdown.bind(this);
@@ -22,10 +23,18 @@ class Variable extends React.Component {
     this.props.changeSelected(event.target.value);
   }
 
+  getName() {
+    const name = this.props.name || this.props.variable;
+    if (!name) throw new TypeError("Missing prop 'name' or 'variable' for Variable component!");
+
+    return name;
+  }
+
   getDefault() {
-    const def = this.props.defaults.filter(Boolean).find(d => d.name === this.props.variable) || {};
+    const def = this.props.defaults.filter(Boolean).find(d => d.name === this.getName()) || {};
+
     if (def.default) return def.default;
-    return this.props.variable.toUpperCase();
+    return this.getName().toUpperCase();
   }
 
   getSelectedValue(selected) {
@@ -43,9 +52,9 @@ class Variable extends React.Component {
   // Additionally do not show the dropdown if there is only a
   // single key, since there's nothing to change it to.
   shouldShowVarDropdown(selected) {
-    const { user, variable } = this.props;
+    const { user } = this.props;
 
-    return !!this.getSelectedValue(selected)[variable] && Array.isArray(user.keys) && user.keys.length > 1;
+    return !!this.getSelectedValue(selected)[this.getName()] && Array.isArray(user.keys) && user.keys.length > 1;
   }
 
   // Return value in this order
@@ -54,10 +63,9 @@ class Variable extends React.Component {
   // - default value
   // - uppercase key
   getValue(selected) {
-    const { variable } = this.props;
     const selectedValue = this.getSelectedValue(selected);
 
-    const value = selectedValue[variable] || this.props.user[variable] || this.getDefault();
+    const value = selectedValue[this.getName()] || this.props.user[this.getName()] || this.getDefault();
 
     return typeof value === 'object' ? JSON.stringify(value) : value;
   }
@@ -142,12 +150,13 @@ class Variable extends React.Component {
 Variable.propTypes = {
   changeSelected: PropTypes.func.isRequired,
   defaults: PropTypes.arrayOf(PropTypes.shape({ default: PropTypes.string, name: PropTypes.string })).isRequired,
+  name: PropTypes.string,
   oauth: PropTypes.bool,
   selected: PropTypes.string.isRequired,
   user: PropTypes.shape({
     keys: PropTypes.array,
   }).isRequired,
-  variable: PropTypes.string.isRequired,
+  variable: PropTypes.string,
 };
 
 Variable.defaultProps = {