add className & alertStyle

meksiabdou · Oct 17, 2022 · bdc9943 · bdc9943
1 parent 4f70928
commit bdc9943
Show file tree

Hide file tree

Showing 12 changed files with 307 additions and 122 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@
 ![npm](https://badgen.net/npm/v/@meksiabdou/alert-reactjs)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 ![license](https://badgen.net/github/license/meksiabdou/alert-reactjs)
+
 ## Install
 
 ```cmd
@@ -15,16 +16,19 @@ yarn add @meksiabdou/alert-reactjs
 ```cmd
 npm install @meksiabdou/alert-reactjs
 ```
+
 ## Props
 
-| Property       | Type                                        | default |
-| -------------- | ------------------------------------------- | ------- |
-| show           | boolean                                     | false   |
-| type           | 'success' or 'error' or 'warning' or 'dark' | success |
-| message        | string                                      | null    |
-| customIcon     | function                                    | N/A     |
-| transitionTime | number (ms)                                 | 250     |
-| onHide         | function                                    | N/A     |
+| Property       | Type                                        | default   |
+| -------------- | ------------------------------------------- | --------- |
+| className      | string                                      | undefined |
+| show           | boolean                                     | false     |
+| type           | 'success' or 'error' or 'warning' or 'dark' | success   |
+| message        | ReactNode or string                         | undefined |
+| customIcon     | ReactNode                                   | undefined |
+| transitionTime | number (ms)                                 | 250       |
+| alertStyle     | AlertStyle                                  | undefined |
+| onHide         | function                                    | undefined |
 
 ## Usage
 
@@ -41,7 +45,14 @@ const Home = () => {
   return (
     <Alert
       type={type}
-      message="Create React Library Example 😄"
+      message={
+        <span>
+          A simple danger alert with an
+          <a href="#" style={{ fontWeight: 700, color: 'inherit' }}>
+            example link
+          </a>. Give it a click if you like.
+        </span>
+      }
       show={show}
       onHide={() => setShow(false)}
     />
@@ -51,7 +62,7 @@ const Home = () => {
 
 ## ScreensShot
 
-![Upload Tab](docs/screenshot.jpg)
+![Upload Tab](docs/screenshot.png)
 
 ## License
 

diff --git a/docs/screenshot.jpg b/docs/screenshot.jpg
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useState } from 'react'
-import Alert from '../.'
+import { useState } from 'react';
+import Alert, { AlertStyle } from '../.';
 
 const App = () => {
-  const [show, setShow] = useState<boolean>(false)
-  const [type, setType] = useState('error')
+  const [show, setShow] = useState<boolean>(false);
+  const [type, setType] = useState('error');
 
   return (
     <div style={{ padding: 10 }}>
@@ -17,41 +17,57 @@ const App = () => {
       >
         Change To {type === 'error' ? 'success' : 'error'}
       </button>
-      <div style={{ width: 400 }}>
+      <div style={{ width: 600 }}>
         <Alert
           type={type as any}
-          message='Create React Library Example 😄'
+          message={
+            <span>
+              A simple danger alert with an{' '}
+              <a href="#" style={{ fontWeight: 700, color: 'inherit' }}>
+                example link
+              </a>
+              . Give it a click if you like.
+            </span>
+          }
           show={show}
           onHide={() => setShow(false)}
         />
         <Alert
           type={'success'}
-          message='Create React Library Example 😄'
+          message="Create React Library Example 😄"
           show={show}
           onHide={() => setShow(false)}
+          alertStyle={{
+            success: {
+              alert: {
+                borderTop: '2px solid rgb(4 108 78)',
+                borderRadius: 0,
+              },
+            },
+          } as AlertStyle}
         />
         <Alert
           type={'warning'}
-          message='Create React Library Example 😄'
+          message="Create React Library Example 😄"
           show={show}
           onHide={() => setShow(false)}
         />
         <Alert
           type={'dark'}
-          message='Create React Library Example 😄'
+          message="Create React Library Example 😄"
           show={show}
           onHide={() => setShow(false)}
         />
         <Alert
-          // type={undefined as any}
+          type={'info'}
           transitionTime={1000}
-          message='Create React Library Example 😄'
+          message="Create React Library Example 😄"
           show={show}
           onHide={() => setShow(false)}
         />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/example/package.json b/example/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "parcel index.html",
+    "start": "rm -r dist .parcel-cache & parcel index.html --no-cache",
     "build": "parcel build index.html"
   },
   "dependencies": {
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@types/react": "^17.0.47",
     "@types/react-dom": "^17.0.17",
-    "parcel": "^2.6.2",
+    "parcel": "^2.7.0",
     "typescript": "^4.7.4"
   }
 }
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [