diff --git a/src/Col.jsx b/src/Col.jsx
index ff090c6..d401061 100644
--- a/src/Col.jsx
+++ b/src/Col.jsx
@@ -7,62 +7,60 @@ const DEFAULT_NODE = "div";
 const ModificatorType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
 const ReorderType = PropTypes.oneOf(["first", "last"]);
 
+const Col = ({
+  xs, xsOffset, xsReorder,
+  sm, smOffset, smReorder,
+  md, mdOffset, mdReorder,
+  lg, lgOffset, lgReorder,
+  reverse,
+  className,
+  nodeName,
+  children,
+  ...other
+}) => {
+  const Element = nodeName || DEFAULT_NODE;
+  const classes = classnames({
+    [flexboxgrid[`${Number.isInteger(xs) ? `col-xs-${xs}` : ""}`]]: xs,
+    [flexboxgrid[`${Number.isInteger(sm) ? `col-sm-${sm}` : ""}`]]: sm,
+    [flexboxgrid[`${Number.isInteger(md) ? `col-md-${md}` : ""}`]]: md,
+    [flexboxgrid[`${Number.isInteger(lg) ? `col-lg-${lg}` : ""}`]]: lg,
+    [flexboxgrid[`col-xs-offset-${xsOffset}`]]: xsOffset,
+    [flexboxgrid[`col-sm-offset-${smOffset}`]]: smOffset,
+    [flexboxgrid[`col-md-offset-${mdOffset}`]]: mdOffset,
+    [flexboxgrid[`col-lg-offset-${lgOffset}`]]: lgOffset,
+    [flexboxgrid[`${xsReorder}-xs`]]: xsReorder,
+    [flexboxgrid[`${smReorder}-xs`]]: smReorder,
+    [flexboxgrid[`${mdReorder}-xs`]]: mdReorder,
+    [flexboxgrid[`${lgReorder}-xs`]]: lgReorder,
+    [flexboxgrid["col-reverse"]]: reverse,
+  }, className);
 
-export default class Col extends Component {
-  static propTypes = {
-    xs: ModificatorType,
-    sm: ModificatorType,
-    md: ModificatorType,
-    lg: ModificatorType,
-    xsOffset: PropTypes.number,
-    smOffset: PropTypes.number,
-    mdOffset: PropTypes.number,
-    lgOffset: PropTypes.number,
-    xsReorder: ReorderType,
-    smReorder: ReorderType,
-    mdReorder: ReorderType,
-    lgReorder: ReorderType,
-    reverse: PropTypes.bool,
-    nodeName: PropTypes.string,
-  };
+  return (
+    <Element className={ classes } { ...other }>
+      { children }
+    </Element>
+  );
+}
 
-  static defaultProps = {
-    nodeName: DEFAULT_NODE,
-  };
+Col.propTypes = {
+  xs: ModificatorType,
+  sm: ModificatorType,
+  md: ModificatorType,
+  lg: ModificatorType,
+  xsOffset: PropTypes.number,
+  smOffset: PropTypes.number,
+  mdOffset: PropTypes.number,
+  lgOffset: PropTypes.number,
+  xsReorder: ReorderType,
+  smReorder: ReorderType,
+  mdReorder: ReorderType,
+  lgReorder: ReorderType,
+  reverse: PropTypes.bool,
+  nodeName: PropTypes.string,
+};
 
-  render() {
-    const {
-      xs, xsOffset, xsReorder,
-      sm, smOffset, smReorder,
-      md, mdOffset, mdReorder,
-      lg, lgOffset, lgReorder,
-      reverse,
-      className,
-      nodeName,
-      children,
-      ...other
-    } = this.props;
-    const Element = nodeName || DEFAULT_NODE;
-    const classes = classnames({
-      [flexboxgrid[`${Number.isInteger(xs) ? `col-xs-${xs}` : ""}`]]: xs,
-      [flexboxgrid[`${Number.isInteger(sm) ? `col-sm-${sm}` : ""}`]]: sm,
-      [flexboxgrid[`${Number.isInteger(md) ? `col-md-${md}` : ""}`]]: md,
-      [flexboxgrid[`${Number.isInteger(lg) ? `col-lg-${lg}` : ""}`]]: lg,
-      [flexboxgrid[`col-xs-offset-${xsOffset}`]]: xsOffset,
-      [flexboxgrid[`col-sm-offset-${smOffset}`]]: smOffset,
-      [flexboxgrid[`col-md-offset-${mdOffset}`]]: mdOffset,
-      [flexboxgrid[`col-lg-offset-${lgOffset}`]]: lgOffset,
-      [flexboxgrid[`${xsReorder}-xs`]]: xsReorder,
-      [flexboxgrid[`${smReorder}-xs`]]: smReorder,
-      [flexboxgrid[`${mdReorder}-xs`]]: mdReorder,
-      [flexboxgrid[`${lgReorder}-xs`]]: lgReorder,
-      [flexboxgrid["col-reverse"]]: reverse,
-    }, className);
+Col.defaultProps = {
+  nodeName: DEFAULT_NODE,
+};
 
-    return (
-      <Element className={ classes } { ...other }>
-        { children }
-      </Element>
-    );
-  }
-}
+export default Col
\ No newline at end of file
diff --git a/src/Grid.jsx b/src/Grid.jsx
index 94a4240..f1453c7 100644
--- a/src/Grid.jsx
+++ b/src/Grid.jsx
@@ -5,35 +5,33 @@ import flexboxgrid from "flexboxgrid/dist/flexboxgrid.css";
 
 const DEFAULT_NODE = "div";
 
+const Grid = ({
+  fluid,
+  className,
+  nodeName,
+  children,
+  ...other
+}) => {
+  const Element = nodeName || DEFAULT_NODE;
+  const classes = classnames({
+    [flexboxgrid["container"]]: !fluid,
+    [flexboxgrid["container-fluid"]]: fluid,
+  }, className);
 
-export default class Grid extends Component {
-  static propTypes = {
-    fluid: PropTypes.bool,
-    nodeName: PropTypes.string,
-  };
+  return (
+    <Element className={ classes } { ...other }>
+      { children }
+    </Element>
+  );
+}
 
-  static defaultProps = {
-    nodeName: DEFAULT_NODE,
-  };
+Grid.propTypes = {
+  fluid: PropTypes.bool,
+  nodeName: PropTypes.string,
+};
 
-  render() {
-    const {
-      fluid,
-      className,
-      nodeName,
-      children,
-      ...other
-    } = this.props;
-    const Element = nodeName || DEFAULT_NODE;
-    const classes = classnames({
-      [flexboxgrid["container"]]: !fluid,
-      [flexboxgrid["container-fluid"]]: fluid,
-    }, className);
+Grid.defaultProps = {
+  nodeName: DEFAULT_NODE,
+};
 
-    return (
-      <Element className={ classes } { ...other }>
-        { children }
-      </Element>
-    );
-  }
-}
+export default Grid
\ No newline at end of file
diff --git a/src/Row.jsx b/src/Row.jsx
index 0e04f76..fa0a5e5 100644
--- a/src/Row.jsx
+++ b/src/Row.jsx
@@ -8,62 +8,60 @@ const HAlignType = PropTypes.oneOf(["start", "center", "end"]);
 const VAlignType = PropTypes.oneOf(["top", "middle", "bottom"]);
 const DistributionType = PropTypes.oneOf(["around", "between"]);
 
+const Row = ({
+  xsHAlign, smHAlign, mdHAlign, lgHAlign,
+  xsVAlign, smVAlign, mdVAlign, lgVAlign,
+  xsDistribution, smDistribution, mdDistribution, lgDistribution,
+  reverse,
+  className,
+  nodeName,
+  children,
+  ...other
+}) => {
+  const Element = nodeName || DEFAULT_NODE;
+  const classes = classnames({
+    [flexboxgrid["row"]]: !reverse,
+    [flexboxgrid["row-reverse"]]: reverse,
+    [flexboxgrid[`${xsHAlign}-xs`]]: xsHAlign,
+    [flexboxgrid[`${smHAlign}-sm`]]: smHAlign,
+    [flexboxgrid[`${mdHAlign}-md`]]: mdHAlign,
+    [flexboxgrid[`${lgHAlign}-lg`]]: lgHAlign,
+    [flexboxgrid[`${xsVAlign}-xs`]]: xsVAlign,
+    [flexboxgrid[`${smVAlign}-sm`]]: smVAlign,
+    [flexboxgrid[`${mdVAlign}-md`]]: mdVAlign,
+    [flexboxgrid[`${lgVAlign}-lg`]]: lgVAlign,
+    [flexboxgrid[`${xsDistribution}-xs`]]: xsDistribution,
+    [flexboxgrid[`${smDistribution}-sm`]]: smDistribution,
+    [flexboxgrid[`${mdDistribution}-md`]]: mdDistribution,
+    [flexboxgrid[`${lgDistribution}-lg`]]: lgDistribution,
+  }, className);
 
-export default class Row extends Component {
-  static propTypes = {
-    reverse: PropTypes.bool,
-    xsHAlign: HAlignType,
-    smHAlign: HAlignType,
-    mdHAlign: HAlignType,
-    lgHAlign: HAlignType,
-    xsVAlign: VAlignType,
-    smVAlign: VAlignType,
-    mdVAlign: VAlignType,
-    lgVAlign: VAlignType,
-    xsDistribution: DistributionType,
-    smDistribution: DistributionType,
-    mdDistribution: DistributionType,
-    lgDistribution: DistributionType,
-    nodeName: PropTypes.string,
-  };
+  return (
+    <Element className={ classes } { ...other }>
+      { children }
+    </Element>
+  );
+}
 
-  static defaultProps = {
-    nodeName: DEFAULT_NODE,
-  };
+Row.propTypes = {
+  reverse: PropTypes.bool,
+  xsHAlign: HAlignType,
+  smHAlign: HAlignType,
+  mdHAlign: HAlignType,
+  lgHAlign: HAlignType,
+  xsVAlign: VAlignType,
+  smVAlign: VAlignType,
+  mdVAlign: VAlignType,
+  lgVAlign: VAlignType,
+  xsDistribution: DistributionType,
+  smDistribution: DistributionType,
+  mdDistribution: DistributionType,
+  lgDistribution: DistributionType,
+  nodeName: PropTypes.string,
+};
 
-  render() {
-    const {
-      xsHAlign, smHAlign, mdHAlign, lgHAlign,
-      xsVAlign, smVAlign, mdVAlign, lgVAlign,
-      xsDistribution, smDistribution, mdDistribution, lgDistribution,
-      reverse,
-      className,
-      nodeName,
-      children,
-      ...other
-    } = this.props;
-    const Element = nodeName || DEFAULT_NODE;
-    const classes = classnames({
-      [flexboxgrid["row"]]: !reverse,
-      [flexboxgrid["row-reverse"]]: reverse,
-      [flexboxgrid[`${xsHAlign}-xs`]]: xsHAlign,
-      [flexboxgrid[`${smHAlign}-sm`]]: smHAlign,
-      [flexboxgrid[`${mdHAlign}-md`]]: mdHAlign,
-      [flexboxgrid[`${lgHAlign}-lg`]]: lgHAlign,
-      [flexboxgrid[`${xsVAlign}-xs`]]: xsVAlign,
-      [flexboxgrid[`${smVAlign}-sm`]]: smVAlign,
-      [flexboxgrid[`${mdVAlign}-md`]]: mdVAlign,
-      [flexboxgrid[`${lgVAlign}-lg`]]: lgVAlign,
-      [flexboxgrid[`${xsDistribution}-xs`]]: xsDistribution,
-      [flexboxgrid[`${smDistribution}-sm`]]: smDistribution,
-      [flexboxgrid[`${mdDistribution}-md`]]: mdDistribution,
-      [flexboxgrid[`${lgDistribution}-lg`]]: lgDistribution,
-    }, className);
+Row.defaultProps = {
+  nodeName: DEFAULT_NODE,
+};
 
-    return (
-      <Element className={ classes } { ...other }>
-        { children }
-      </Element>
-    );
-  }
-}
+export default Row
\ No newline at end of file