Skip to content

Commit 5f07424

Browse files
ssi02014ssi02014
committed
docs: README.md
1 parent 57dd405 commit 5f07424

File tree

3 files changed

+31
-59
lines changed

3 files changed

+31
-59
lines changed

‎README.md‎

Lines changed: 29 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -84,19 +84,20 @@
8484
<br />
8585

8686
## Top Icons Feature
87-
<img width="450-" alt="스크린샷 2023-02-27 오후 9 53 09" src="https://user-images.githubusercontent.com/64779472/221569330-cf13379a-b21e-43a1-a766-b22d874da60d.png">
87+
<img width="450" alt="스크린샷 2023-02-27 오후 9 53 09" src="https://github.com/ssi02014/react-thumbnail-generator/assets/64779472/d23a255e-3dc3-4140-b016-26f77e7afe1e">
8888

89-
- 1: Picture
89+
- 1: Background Picture
90+
- 2: Text Align (start, center, end)
9091
- 2: Background Color
9192
- 3: Font Color
9293
- 4: Font Stroke Color
9394
- 5: Blur Effect
9495

95-
<br />
96+
<hr />
9697

9798
## How to use React 😊
9899
### STEP 1️⃣
99-
- Install library
100+
- Install Package
100101
```
101102
yarn add react-thumbnail-generator
102103
or
@@ -106,28 +107,8 @@ npm install react-thumbnail-generator
106107
<br />
107108

108109
### STEP 2️⃣
109-
- Enter the desired ID of the div that you want to add to `public/index.html`.
110-
- To avoid being affected by CSS inheritance, `<ThumbnailGenerator>` is applied with a Portal.
111-
112-
```html
113-
<!DOCTYPE html>
114-
<html lang="en">
115-
<head>
116-
<!-- ... -->
117-
</head>
118-
<body>
119-
<div id="root"></div>
120-
<!-- Enter the ID you want. -->
121-
<div id="thumbnail-generator"></div>
122-
</body>
123-
</html>
124-
125-
```
126-
127-
<br />
128-
129-
### STEP 3️⃣
130110
- Add `<ThumbnailGenerator>` component.
111+
- ThumbnailGenerator is automatically rendered as a `document.body` child by default using `Portal`.
131112

132113
```jsx
133114
import ThumbnailGenerator from 'react-thumbnail-generator';
@@ -137,11 +118,6 @@ const App = () => {
137118
return (
138119
<div>
139120
<ThumbnailGenerator
140-
id="thumbnail-generator"
141-
// Please enter the ID of the div you added in public/index.html.
142-
// If you do not specify an ID, it will be rendered in the "root" div.
143-
// However, this may cause the UI to change due to CSS inheritance.
144-
145121
buttonIcon={<img src={iconImage} width={30} height={30} alt="iconImage" />}
146122
// To insert the inner icon of the button that opens the thumbnail modal, use the ReactNode.
147123
// If you do not include this option, the default icon will be used.
@@ -170,47 +146,46 @@ const App = () => {
170146
)
171147
}
172148
```
149+
173150
<br />
174151

175152
## How to use Next 😊
176153
### STEP 1️⃣
177-
- Enter the desired ID of the div that you want to add to `_document`.
178-
```jsx
179-
import { Html, Head, Main, NextScript } from "next/document";
180-
181-
export default function Document() {
182-
return (
183-
<Html lang="en">
184-
<Head />
185-
<body>
186-
<Main />
187-
<div id="thumbnail-generator"></div>
188-
<NextScript />
189-
</body>
190-
</Html>
191-
);
192-
}
154+
- Install Package
155+
```
156+
yarn add react-thumbnail-generator next-transpile-modules
157+
or
158+
npm install react-thumbnail-generator next-transpile-modules
193159
```
194160

195161
<br />
196162

197163
### STEP 2️⃣
164+
- Modify next.config
165+
```js
166+
/** @type {import('next').NextConfig} */
167+
const nextConfig = {
168+
reactStrictMode: true,
169+
transpilePackages: ["react-step-parallax"],
170+
};
171+
172+
module.exports = nextConfig;
173+
```
174+
175+
<br />
176+
177+
### STEP 3️⃣
198178
- Add `<ThumbnailGenerator>` to dynamic import.
199179

200180
```jsx
201181
import dynamic from "next/dynamic";
202182
import Image from "next/image";
203183

204-
const ThumbnailGenerator = dynamic(() => import("react-thumbnail-generator"), {
205-
ssr: false,
206-
});
207-
208184
export default function Home() {
209185
return (
210186
<>
211187
<ThumbnailGenerator
212-
id="thumbnail-generator"
213-
buttonIcon={<Image src={profilePic} width={30} height={30} alt="buttonIcon" />}
188+
buttonIcon={<Image src={buttonIcon} width={30} height={30} alt="buttonIcon" />}
214189
/>
215190
</>
216191
);
@@ -241,7 +216,6 @@ export default function Home() {
241216
</head>
242217
<body>
243218
<div id="root"></div>
244-
<div id="thumbnail-generator"></div>
245219
</body>
246220
</html>
247221
```
@@ -259,7 +233,6 @@ const App = () => {
259233
return (
260234
<div>
261235
<ThumbnailGenerator
262-
id="thumbnail-generator"
263236
additionalFontFamily={["Zeyada"]} // (*)
264237
/>
265238
</div>
@@ -275,11 +248,10 @@ const App = () => {
275248
<img src="https://user-images.githubusercontent.com/64779472/220677341-7b6c062f-f0f6-49dd-8bcd-b402b61660ea.png" width="450">
276249

277250
<br />
251+
<br />
252+
<hr />
278253

279254
## API 📄
280-
- id
281-
- **Optional**
282-
- Type: `string`
283255
- buttonIcon
284256
- **Optional**
285257
- Default: <img width="43" alt="스크린샷 2023-02-20 오후 10 48 05" src="https://user-images.githubusercontent.com/64779472/220125380-77aaaa79-9baf-4252-aa46-a44e6e91dd3d.png">

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"image",
8181
"banner",
8282
"icon",
83-
"generator"
83+
"generator",
84+
"emotion"
8485
]
8586
}

‎src/stories/components/ThumbnailGenerator.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ const Template: StoryFn = ({
3838
}: Props) => {
3939
return (
4040
<ThumbnailGenerator
41-
id="thumbnail-generator"
4241
modalPosition={modalPosition}
4342
iconPosition={iconPosition}
4443
iconSize={iconSize}

0 commit comments

Comments
 (0)