├── .babelrc
├── .editorconfig
├── .github
├── ISSUE_TEMPLATE.md
└── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── .storybook
├── config.js
└── webpack.config.js
├── LICENSE
├── README.md
├── examples
└── index.html
├── index.js
├── package-lock.json
├── package.json
├── res
└── demo.gif
├── src
├── MessageModal
│ ├── colors.js
│ ├── index.js
│ ├── keyframes.js
│ └── styles.js
└── index.js
├── stories
└── index.stories.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
14 | [{package.json,*.yml}]
15 | indent_style = space
16 | indent_size = 2
17 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | # 事象説明
2 |
3 | ## スクリーンショット
4 |
5 | ## 原因
6 |
7 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | # 目的
2 |
3 | ## スクリーンショット
4 |
5 | ## やったこと
6 |
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
3 | lib/
4 | examples/index.js
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | LICENSE
2 | src/
3 | res/
4 | examples/
5 | README.md
6 | .babelrc
7 | .npmrc
8 | .prettierrc
9 | .prettierignore
10 | .editorconfig
11 | .keep
12 | webpack.config.js
13 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | save-exact=true
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | examples
4 | res
5 | package.json
6 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 80,
3 | "semi": false,
4 | "singleQuote": true,
5 | "jsxSingleQuote": true,
6 | "trailingComma": "es5",
7 | "jsxBracketSameLine": true
8 | }
9 |
--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/react'
2 |
3 | // automatically import all files ending in *.stories.js
4 | const req = require.context('../stories', true, /.stories.js$/)
5 | function loadStories() {
6 | req.keys().forEach(filename => req(filename))
7 | }
8 |
9 | configure(loadStories, module)
10 |
--------------------------------------------------------------------------------
/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | // you can use this file to add your custom webpack plugins, loaders and anything you like.
2 | // This is just the basic way to add additional webpack configurations.
3 | // For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
4 |
5 | // IMPORTANT
6 | // When you add this file, we won't add the default configurations which is similar
7 | // to "React Create App". This only has babel loader to load JavaScript.
8 |
9 | module.exports = {
10 | plugins: [
11 | // your custom plugins
12 | ],
13 | module: {
14 | rules: [
15 | // add your custom rules.
16 | ],
17 | },
18 | }
19 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 yui540
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # @yui540/react-message-modal
2 |
3 | 『メッセージが届いています。』
4 |
5 | デモサイトは[こちら](https://yui540-react-message-modal.netlify.com/)
6 |
7 | 
8 |
9 | - npm
10 | - [@yui540/react-message-modal](https://www.npmjs.com/package/@yui540/react-message-modal)
11 | - 開発者
12 | - yui540
13 | - [Twitter: @yui540](https://twitter.com/yui540)
14 | - [HP](https://yui540.graphics/)
15 |
16 | ## 使い方
17 |
18 | まず、自身のプロジェクトに`@yui540/react-message-modal`をインストールしてください。
19 |
20 | ```bash
21 | $ npm i @yui540/react-message-modal -S
22 | ```
23 |
24 | あとは、自身のプロジェクトの組み込みたい箇所にコンポーネントをマウントしてください。
25 |
26 | props 等の詳細は下記のソースコードのコメントをご参考ください。
27 |
28 | ```javascript
29 | import React from 'react'
30 | import { render } from 'react-dom'
31 |
32 | // MessageModalに渡すprops一覧です
33 | const className = 'message-modal'
34 | const title = 'メッセージが届いています。'
35 | const fontColor = '#5d3523'
36 | const okColor = '#90bdbd'
37 | const cancelColor = '#ea8b98'
38 | const mainColor = '#e4d6ce'
39 | const subColor = '#ffffff'
40 | const onClose = () => console.log('close')
41 | const sp = !(window.innerWidth > 760)
42 | const props = {
43 | title, // [type: string] メッセージモーダルのタイトル
44 | fontColor, // [type: string][options] モーダルのタイトル色
45 | okColor, // [type: string][options] OKボタンの色
46 | cancelColor, // [type: string][options] キャンセルボタンの色
47 | mainColor, // [type: string][options] モーダルのメインカラー
48 | subColor, // [type: string][options] モーダルのサブカラー
49 | onClose, // [type: func][options] モーダルを閉じた時に呼ばれる関数
50 | sp, // [type: bool][options] スマートフォンか否か
51 | className, // [type: string][options] class名
52 | }
53 |
54 | /*
55 | 各色のデフォルトの値は下記の通り
56 |
57 | fontColor = '#5d3523
58 | okColor = '#90bdbd'
59 | cancelColor = '#ea8b98'
60 | mainColor = '#e4d6ce'
61 | subColor = '#ffffff'
62 | */
63 |
64 | render(
65 | // MessageModalの子要素がメッセージの内容になります
66 |
67 |
はじめまして。
68 |
はじめまして。yui540です。
69 |
11 |
はじめまして。
12 |
はじめして。yui540です。
13 |