Expose icons as named exports for consumers of package

README.md

@@ -1,11 +1,72 @@
-# react-alert-template-basic
+# react-alert-template-basic-with-icons
 
-> Basic alert template for [react-alert](https://github.com/schiehll/react-alert)
+> Basic alert template with icons for [react-alert](https://github.com/schiehll/react-alert)
 
-[![version](https://img.shields.io/npm/v/react-alert-template-basic.svg?style=flat-square)](http://npm.im/react-alert-template-basic)
+[![version](https://img.shields.io/npm/v/react-alert-template-basic-with-icons.svg?style=flat-square)](http://npm.im/react-alert-template-basic-with-icons)
 
 ## Installation
 
 ```bash
-$ npm install --save react-alert-template-basic
+$ npm install --save react-alert-template-basic-with-icons
 ```
+
+## Usage
+
+You can use this package with `react-alert` by importing AlertTemplate from this package and giving it to the AlertProvider from `react-alert`. Alternatively, you can create a styled alert component, and then give the styled component to the AlertProvider as the template. You can override the default template style, and change the icon colors like so:
+
+```js
+// StyledAlertTemplate.js
+import React from 'react';
+import AlertTemplate from 'react-alert-template-basic-with-icons'
+
+// Template style overrides
+const styleOverrides = {
+    backgroundColor: 'white',
+    color: 'black',
+    width: '450px'
+}
+
+export default (props) => (
+    <AlertTemplate
+        {...props}
+        iconColors={{ close: 'black' }} 
+        style={{ ...props.style, ...styleOverrides }}
+    />
+)
+```
+
+You can also create your own custom alert template and use the exposed icons. You can import the icons like so:
+
+```js
+//MyAlertTemplate.js
+
+import React from 'react';
+import { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon } from 'react-alert-template-basic-with-icons'
+
+const MyAlertTemplate = () => {} //Create your template with the icon components here
+
+export default MyAlertTemplate
+```
+
+## Options
+
+You can provide an `iconColors` prop to AlertTemplate in order to change the color of the icons. It takes an object of the following type:
+
+```js
+iconColors?: {
+  info?: string,
+  success?: string,
+  error?: string,
+  close?: string
+}
+```
+
+The default colors are:
+
+```js
+info: '#2E9AFE'
+success: '#31B404'
+error: '#FF0040'
+close: '#FFFFFF'
+```
+

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "react-alert-template-basic",
-  "version": "1.0.0",
+  "name": "react-alert-template-basic-with-icons",
+  "version": "1.2.4",
   "author": "Reinaldo Schiehll <rn.schiehll@gmail.com>",
-  "main": "dist/cjs/react-alert-template-basic.js",
-  "module": "dist/esm/react-alert-template-basic.js",
+  "main": "dist/cjs/react-alert-template-basic-with-icons.js",
+  "module": "dist/esm/react-alert-template-basic-with-icons.js",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/schiehll/react-alert-template-basic.git"
+    "url": "https://github.com/jeronimomora/react-alert-template-basic.git"
   },
   "keywords": [
     "react",
@@ -16,7 +16,9 @@
     "toaster",
     "react-toaster",
     "react-component",
-    "react-alert-template"
+    "react-alert-template",
+    "react-alert-template-basic",
+    "react-alert-template-basc-with-icons"
   ],
   "scripts": {
     "build": "node ./scripts/build.js",

src/AlertTemplate.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon } from './icons'
+
+const defaultAlertStyle = {
+  backgroundColor: '#151515',
+  color: 'white',
+  padding: '10px',
+  textTransform: 'uppercase',
+  borderRadius: '3px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)',
+  fontFamily: 'Arial',
+  width: '300px',
+  boxSizing: 'border-box'
+}
+
+const defaultButtonStyle = {
+  marginLeft: '20px',
+  border: 'none',
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
+  color: '#FFFFFF'
+}
+
+const AlertTemplate = ({ 
+  message, 
+  options, 
+  style, 
+  buttonStyle = defaultButtonStyle,
+  iconColors = {},
+  close
+}) => {
+  return (
+    <div style={{ ...defaultAlertStyle, ...style }}>
+      {options.type === 'info' && <InfoIcon color={iconColors.info} />}
+      {options.type === 'success' && <SuccessIcon color={iconColors.success} />}
+      {options.type === 'error' && <ErrorIcon color={iconColors.error} />}
+      <span style={{ flex: 2 }}>{message}</span>
+      <button onClick={close} style={buttonStyle}>
+        <CloseIcon color={iconColors.close} />
+      </button>
+    </div>
+  )
+}
+
+export default AlertTemplate

src/icons/CloseIcon.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import BaseIcon from './BaseIcon'
 
-const CloseIcon = () => (
-  <BaseIcon color='#FFFFFF' pushRight={false}>
+const CloseIcon = ({ color = '#FFFFFF' }) => (
+  <BaseIcon color={color} pushRight={false}>
     <line x1='18' y1='6' x2='6' y2='18' />
     <line x1='6' y1='6' x2='18' y2='18' />
   </BaseIcon>

src/icons/ErrorIcon.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import BaseIcon from './BaseIcon'
 
-const ErrorIcon = () => (
-  <BaseIcon color='#FF0040'>
+const ErrorIcon = ({ color = '#FF0040' }) => (
+  <BaseIcon color={color}>
     <circle cx='12' cy='12' r='10' />
     <line x1='12' y1='8' x2='12' y2='12' />
     <line x1='12' y1='16' x2='12' y2='16' />

src/icons/InfoIcon.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import BaseIcon from './BaseIcon'
 
-const InfoIcon = () => (
-  <BaseIcon color='#2E9AFE'>
+const InfoIcon = ({ color = '#2E9AFE' }) => (
+  <BaseIcon color={color}>
     <circle cx='12' cy='12' r='10' />
     <line x1='12' y1='16' x2='12' y2='12' />
     <line x1='12' y1='8' x2='12' y2='8' />

src/icons/SuccessIcon.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import BaseIcon from './BaseIcon'
 
-const SuccessIcon = () => (
-  <BaseIcon color='#31B404'>
+const SuccessIcon = ({ color = '#31B404' }) => (
+  <BaseIcon color={color}>
     <path d='M22 11.08V12a10 10 0 1 1-5.93-9.14' />
     <polyline points='22 4 12 14.01 9 11.01' />
   </BaseIcon>

src/icons/index.js

@@ -0,0 +1,7 @@
+import BaseIcon from './BaseIcon'
+import InfoIcon from './InfoIcon'
+import SuccessIcon from './SuccessIcon'
+import ErrorIcon from './ErrorIcon'
+import CloseIcon from './CloseIcon'
+
+export { BaseIcon, InfoIcon, SuccessIcon, ErrorIcon, CloseIcon }

src/index.js

@@ -1,44 +1,2 @@
-import React from 'react'
-import InfoIcon from './icons/InfoIcon'
-import SuccessIcon from './icons/SuccessIcon'
-import ErrorIcon from './icons/ErrorIcon'
-import CloseIcon from './icons/CloseIcon'
-
-const alertStyle = {
-  backgroundColor: '#151515',
-  color: 'white',
-  padding: '10px',
-  textTransform: 'uppercase',
-  borderRadius: '3px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)',
-  fontFamily: 'Arial',
-  width: '300px',
-  boxSizing: 'border-box'
-}
-
-const buttonStyle = {
-  marginLeft: '20px',
-  border: 'none',
-  backgroundColor: 'transparent',
-  cursor: 'pointer',
-  color: '#FFFFFF'
-}
-
-const AlertTemplate = ({ message, options, style, close }) => {
-  return (
-    <div style={{ ...alertStyle, ...style }}>
-      {options.type === 'info' && <InfoIcon />}
-      {options.type === 'success' && <SuccessIcon />}
-      {options.type === 'error' && <ErrorIcon />}
-      <span style={{ flex: 2 }}>{message}</span>
-      <button onClick={close} style={buttonStyle}>
-        <CloseIcon />
-      </button>
-    </div>
-  )
-}
-
-export default AlertTemplate
+export * from './icons'
+export { default } from './AlertTemplate'