Skip to content

Commit 9a1d578

Browse files
isamrishisamrish
committed
Add initial working code for library flex-banner
Signed-off-by: isamrish <askmaurya48@gmail.com>
0 parents  commit 9a1d578

23 files changed

+19074
-0
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
dist/
3+
*-error.log
4+
example/node_modules/

‎.travis.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
language: node_js
2+
node_js:
3+
- 9
4+
- 8

‎README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# flex-banner
2+
3+
> Fully responsive react banner for websites
4+
5+
[![NPM](https://img.shields.io/npm/v/flex-banner.svg)](https://www.npmjs.com/package/flex-banner) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
6+
7+
## Install
8+
9+
```bash
10+
npm install --save flex-banner
11+
```
12+
13+
## Usage
14+
15+
```tsx
16+
import * as React from "react";
17+
18+
import BannerComponent from "flex-banner";
19+
20+
class Example extends React.Component {
21+
render() {
22+
return <BannerComponent />;
23+
}
24+
}
25+
```
26+
27+
## License
28+
29+
MIT © [isamrish](https://github.com/isamrish)

‎example/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎example/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Example for flex-banner

‎example/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "flex-banner-example",
3+
"homepage": "https://isamrish.github.io/flex-banner",
4+
"version": "0.0.0",
5+
"license": "MIT",
6+
"private": true,
7+
"dependencies": {
8+
"prop-types": "^15.6.2",
9+
"react": "^16.4.1",
10+
"react-dom": "^16.4.1",
11+
"react-scripts": "^1.1.4",
12+
"flex-banner": "link:.."
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test --env=jsdom",
18+
"eject": "react-scripts eject"
19+
}
20+
}

‎example/public/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
8+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9+
10+
<title>flex-banner</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
You need to enable JavaScript to run this app.
16+
</noscript>
17+
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎example/public/manifest.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"short_name": "flex-banner",
3+
"name": "flex-banner",
4+
"start_url": "./index.html",
5+
"display": "standalone",
6+
"theme_color": "#000000",
7+
"background_color": "#ffffff"
8+
}

‎example/src/App.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
3+
import BannerComponent from "flex-banner";
4+
const App = () => {
5+
const config = {
6+
title: "Title of banner",
7+
link: {
8+
title: "Google",
9+
url: `https://google.com`
10+
},
11+
delayTimeToShowBanner: 1,
12+
slidingTime: 1,
13+
center: true, // Whether Align the main block items center or not
14+
timeForCookie: false, // in days { default is false or number } = number represents days to keep
15+
isCross: true,
16+
wrapperStyle: {
17+
backgroundColor: "blue",
18+
paddingLeft: "24px",
19+
paddingRight: "24px",
20+
textAlign: "center"
21+
},
22+
mainStyle: {
23+
color: "white",
24+
textAlign: "center",
25+
margin: "10px"
26+
},
27+
crossStyle: {
28+
fontSize: "16px"
29+
}
30+
};
31+
return (
32+
<div>
33+
<BannerComponent config={config} />
34+
<div
35+
style={{ height: "200px", padding: "30px", backgroundColor: "green" }}
36+
>
37+
<h2 style={{ margin: "0px" }}>This is dummy image!!!</h2>
38+
</div>
39+
</div>
40+
);
41+
};
42+
43+
export default App;

‎example/src/index.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎example/src/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
4+
import './index.css'
5+
import App from './App'
6+
7+
ReactDOM.render(<App />, document.getElementById('root'))

0 commit comments

Comments
 (0)