diff --git a/README.md b/README.md
index e48cb66..2bdc75e 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@ React component that renders the children if the `condition` prop is `true`.
 
 ```jsx
 import { If } from '@uiw/react-only-when';
+// Or
+import { If } from '@uiw/react-only-when/if'
 
 <div>
   <If
diff --git a/if.d.ts b/if.d.ts
new file mode 100644
index 0000000..0742a1b
--- /dev/null
+++ b/if.d.ts
@@ -0,0 +1,10 @@
+
+declare module '@uiw/react-only-when/if' {
+  import { ReactElement } from "react";
+  import { FC, PropsWithChildren } from "react";
+  export interface IfProps {
+    readonly condition?: boolean;
+    readonly render?: () => ReactElement;
+  }
+  export const If: FC<PropsWithChildren<IfProps>>;
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 2033fbb..7462fdd 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,25 @@
   "description": "A declarative component for conditional rendering.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
+  "exports": {
+    "./README.md": "./README.md",
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "types": "./esm/index.d.ts"
+    },
+    "./if": {
+      "import": "./esm/If.js",
+      "require": "./cjs/If.js",
+      "types": "./esm/If.d.ts"
+    }
+  },
   "scripts": {
     "prepack": "npm run build",
     "doc": "kkt build --app-src ./website",
     "start": "kkt start --app-src ./website",
-    "watch": "tsbb watch src/*tsx --use-babel --cjs cjs",
-    "build": "tsbb build src/*tsx --use-babel --cjs cjs",
+    "watch": "tsbb watch src/*.tsx --use-babel --cjs cjs",
+    "build": "tsbb build src/*.tsx --use-babel --cjs cjs",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "kkt test --env=jsdom --app-src=./website",
     "test:coverage": "kkt test --env=jsdom --coverage --app-src=./website"
diff --git a/src/__test__/If.test.tsx b/src/__test__/If.test.tsx
new file mode 100644
index 0000000..678be19
--- /dev/null
+++ b/src/__test__/If.test.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable jest/no-conditional-expect */
+import TestRenderer from 'react-test-renderer';
+import { If } from '../';
+
+describe('<If />', () => {
+
+  it('Not rendering children', () => {
+    const component = TestRenderer.create(
+      <If condition={false}>
+        <span id="child" />
+      </If>,
+    );
+    let only = component.toJSON();
+    expect(only).toBeNull();
+  });
+
+  it('rendering children', () => {
+    const component = TestRenderer.create(
+      <If condition={true}>
+        <span id="child" />
+      </If>,
+    );
+    let only = component.toJSON();
+
+    if (only && !Array.isArray(only)) {
+      expect(only.type).toEqual('span');
+      expect(only.props.id).toEqual('child');
+    }
+  });
+
+  it('render props', () => {
+    const component = TestRenderer.create(
+      <If condition={true} render={() => <span id="child" />} />,
+    );
+    let only = component.toJSON();
+
+    if (only && !Array.isArray(only)) {
+      expect(only.type).toEqual('span');
+      expect(only.props.id).toEqual('child');
+    }
+  });
+
+})
diff --git a/src/__test__/index.test.tsx b/src/__test__/index.test.tsx
index f427070..113ec92 100644
--- a/src/__test__/index.test.tsx
+++ b/src/__test__/index.test.tsx
@@ -1,47 +1,6 @@
 /* eslint-disable jest/no-conditional-expect */
 import TestRenderer from 'react-test-renderer';
 import Only from '../';
-import { If } from '../';
-
-describe('<If />', () => {
-
-  it('Not rendering children', () => {
-    const component = TestRenderer.create(
-      <If condition={false}>
-        <span id="child" />
-      </If>,
-    );
-    let only = component.toJSON();
-    expect(only).toBeNull();
-  });
-
-  it('rendering children', () => {
-    const component = TestRenderer.create(
-      <If condition={true}>
-        <span id="child" />
-      </If>,
-    );
-    let only = component.toJSON();
-
-    if (only && !Array.isArray(only)) {
-      expect(only.type).toEqual('span');
-      expect(only.props.id).toEqual('child');
-    }
-  });
-
-  it('render props', () => {
-    const component = TestRenderer.create(
-      <If condition={true} render={() => <span id="child" />} />,
-    );
-    let only = component.toJSON();
-
-    if (only && !Array.isArray(only)) {
-      expect(only.type).toEqual('span');
-      expect(only.props.id).toEqual('child');
-    }
-  });
-
-})
 
 describe('<Only />', () => {
   it('Not rendering children', () => {