Skip to content

Commit c07af65

Browse files
jaywcjlovejaywcjlove
committed
init project.
1 parent bbadb64 commit c07af65

File tree

12 files changed

+267
-135
lines changed

12 files changed

+267
-135
lines changed

‎.github/workflows/ci.yml

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@ jobs:
4040
# - run: npm run hoist
4141
- run: npm run build
4242
- run: npm run coverage
43-
- run: npm run bundle
44-
- run: npm run bundle:min
4543
- run: npm run doc
4644

4745
- name: Generate Contributors Images
@@ -57,8 +55,6 @@ jobs:
5755
output: website/build/badges.svg
5856

5957
- run: cp -rp coverage website/build
60-
- run: cp -rp core/dist/*js website/build
61-
- run: cp -rp core/dist/*css website/build
6258

6359
- name: Is a tag created auto?
6460
id: create_tag
@@ -95,7 +91,7 @@ jobs:
9591
name: ${{ steps.changelog.outputs.tag }}
9692
tag: ${{ steps.changelog.outputs.tag }}
9793
body: |
98-
Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-monorepo-template/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html
94+
Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-iframe/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html
9995
Comparing Changes: ${{ steps.changelog.outputs.compareurl }}
10096
10197
${{ steps.changelog.outputs.changelog }}
@@ -111,7 +107,7 @@ jobs:
111107
# package: ./core/package.json
112108

113109
# - run: npm publish --access public
114-
# name: 📦 @uiw/react-monorepo-template to NPM
110+
# name: 📦 @uiw/react-iframe to NPM
115111
# working-directory: core
116112
# continue-on-error: true
117113
# env:

‎core/.kktrc.ts

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎core/README.md

Lines changed: 138 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,181 @@
1-
react-monorepo-template
1+
react-iframe
22
===
33

44
[![Build & Deploy](https://github.com/uiwjs/react-monorepo-template/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-monorepo-template/actions/workflows/ci.yml)
55
[![Coverage Status](https://uiwjs.github.io/react-monorepo-template/badges.svg)](https://uiwjs.github.io/react-monorepo-template/coverage/lcov-report/)
66

7-
Simple [React](https://github.com/facebook/react) package development project example template.
7+
This component allows you to wrap your entire React application or each component in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe).
88

9-
## Directory Structure
9+
## Installation
1010

1111
```bash
12-
├── LICENSE
13-
├── README.md -> core/README.md
14-
├── core # 📦 package @uiw/react-monorepo-template
15-
│ ├── README.md
16-
│ ├── cjs # 🔄 Compiled cjs directory
17-
│ ├── esm # 🔄 Compiled esm directory
18-
│ ├── src # Package source directory
19-
│ ├── dist.css # 🔄 compile less to css
20-
│ ├── package.json # name => @uiw/react-monorepo-template
21-
│ └── tsconfig.json
22-
├── lerna.json
23-
├── package.json
24-
├── tsconfig.json
25-
├── test # ⛑ test case
26-
└── website # 🐝 Package example test, website
27-
├── README.md
28-
├── package.json
29-
├── public
30-
├── src
31-
└── tsconfig.json
12+
npm i @uiw/react-iframe
3213
```
3314

34-
## Development
15+
## Basic Usage
3516

36-
1. Install
17+
```jsx mdx:preview
18+
import React from 'react';
19+
import IFrame from '@uiw/react-iframe';
3720

38-
```bash
39-
npm install
21+
export default function Demo() {
22+
return (
23+
<IFrame>
24+
<h1>Hello World!</h1>
25+
</IFrame>
26+
);
27+
}
4028
```
4129

42-
2. Dependencies in the installation package and example
30+
## `head`
4331

44-
```bash
45-
npm run hoist
46-
```
32+
The `head` prop is a dom node that gets inserted before the children of the frame.
4733

48-
3. To develop, run the self-reloading build:
34+
```jsx mdx:preview
35+
import React from 'react';
36+
import IFrame from '@uiw/react-iframe';
4937

50-
```bash
51-
npm run build # Compile packages 📦 @uiw/react-monorepo-template
52-
npm run watch # Real-time compilation 📦 @uiw/react-monorepo-template
38+
const head = (
39+
<style>{`body { background: red; }`}</style>
40+
);
41+
42+
export default function Demo() {
43+
return (
44+
<IFrame head={head}>
45+
<h1>Hello World!</h1>
46+
</IFrame>
47+
);
48+
}
5349
```
5450

55-
4. Run Document Website Environment:
51+
## `initialContent`
5652

57-
```bash
58-
npm run start
53+
The `initialContent` props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) tag, [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) tags, etc). Note that it does not update if you change the prop.
54+
55+
Defaults to `<!DOCTYPE html><html><head></head><body></body></html>`
56+
57+
```jsx mdx:preview
58+
import React from 'react';
59+
import IFrame from '@uiw/react-iframe';
60+
61+
const initialContent = '<!DOCTYPE html><html><head><title>React IFrame</title><meta name="keywords" content="react,iframe,component,development" /></head><body></body></html>';
62+
63+
export default function Demo() {
64+
return (
65+
<IFrame initialContent={initialContent}>
66+
<div style={{ fontSize: 32, color: 'red' }}>Hello World!</div>
67+
</IFrame>
68+
);
69+
}
5970
```
6071

61-
5. To contribute, please fork repos, add your patch and tests for it (in the `test/` folder) and submit a pull request.
72+
## `mountTarget`
6273

74+
The `mountTarget` attribute is a css selector (`#target`/`.target`) that specifies the child within the initial content of the iframe to be mounted.
75+
76+
```jsx mdx:preview
77+
import React from 'react';
78+
import IFrame from '@uiw/react-iframe';
79+
80+
const initialContent = '<!DOCTYPE html><html><head></head><body><h1>i wont be changed</h1><div id="mountHere"></div></body></html>';
81+
82+
export default function Demo() {
83+
return (
84+
<IFrame initialContent={initialContent} mountTarget="#mountHere">
85+
<div style={{ fontSize: 32, color: 'red' }}>Hello World!</div>
86+
</IFrame>
87+
);
88+
}
6389
```
64-
npm run test
90+
91+
## `ref`
92+
93+
The ref prop provides a way to access inner [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) DOM node.
94+
95+
```tsx mdx:preview
96+
import React, { useEffect, useState, Fragment } from 'react';
97+
import IFrame from '@uiw/react-iframe';
98+
99+
export default function Demo() {
100+
const [iframeRef, setIframeRef] = useState();
101+
const [count, setCount] = useState(0);
102+
103+
useEffect(() => {
104+
if (iframeRef) {
105+
iframeRef.focus();
106+
}
107+
}, [iframeRef]);
108+
109+
const click = () => setCount(count + 1);
110+
return (
111+
<Fragment>
112+
<button onClick={click} style={{ display: 'flex' }}>Click</button>
113+
<IFrame ref={(node) => node && setIframeRef(node)}>
114+
<div>Hello World!</div>
115+
<div style={{ fontSize: 32, color: 'red' }}>{count}</div>
116+
</IFrame>
117+
</Fragment>
118+
);
119+
}
65120
```
66121

122+
## `src`
67123

68-
### Using
124+
The ref prop provides a way to access inner [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) DOM node.
69125

70-
```jsx mdx:preview
71-
import React from "react";
72-
import MonorepoTemplate from '@uiw/react-monorepo-template';
126+
```tsx mdx:preview
127+
import React, { useEffect, useState, Fragment } from 'react';
128+
import IFrame from '@uiw/react-iframe';
73129

74-
export default function App() {
130+
export default function Demo() {
75131
return (
76-
<div className="container">
77-
<MonorepoTemplate>
78-
Example test
79-
</MonorepoTemplate>
80-
</div>
132+
<IFrame src="https://wangchujiang.com/" style={{ width: '100%', height: 320 }} />
81133
);
82134
}
83135
```
136+
## Props
137+
138+
```ts
139+
export interface IFrameProps extends React.HTMLAttributes<HTMLIFrameElement> {
140+
head?: React.ReactNode;
141+
initialContent?: string;
142+
mountTarget?: string;
143+
}
144+
declare const IFrame: import("react").ForwardRefExoticComponent<IFrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
145+
export default IFrame;
146+
```
147+
148+
## Development
149+
150+
Runs the project in development mode.
151+
152+
```bash
153+
# Step 1, run first, listen to the component compile and output the .js file
154+
# listen for compilation output type .d.ts file
155+
npm run watch
156+
# Step 2, development mode, listen to compile preview website instance
157+
npm run start
158+
```
159+
160+
Builds the app for production to the build folder.
161+
162+
```bash
163+
npm run build
164+
```
165+
166+
The build is minified and the filenames include the hashes.
167+
Your app is ready to be deployed!
168+
84169

85170
## Contributors
86171

87172
As always, thanks to our amazing contributors!
88173

89-
<a href="https://github.com/uiwjs/react-monorepo-template/graphs/contributors">
90-
<img src="https://uiwjs.github.io/react-monorepo-template/CONTRIBUTORS.svg" />
174+
<a href="https://github.com/uiwjs/react-iframe/graphs/contributors">
175+
<img src="https://uiwjs.github.io/react-iframe/CONTRIBUTORS.svg" />
91176
</a>
92177

93-
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
178+
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
94179

95180
## License
96181

‎core/package.json

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
2-
"name": "@uiw/react-monorepo-template",
3-
"version": "1.1.0",
4-
"description": "Simple React package development project example template..",
2+
"name": "@uiw/react-iframe",
3+
"version": "0.0.1",
4+
"description": "This component allows you to wrap your entire React application or each component in an iFrame.",
55
"author": "Kenny Wong <[email protected]>",
6-
"homepage": "https://uiwjs.github.io/react-monorepo-template",
6+
"homepage": "https://uiwjs.github.io/react-iframe",
77
"repository": {
88
"type": "git",
9-
"url": "https://github.com/uiwjs/react-monorepo-template.git"
9+
"url": "https://github.com/uiwjs/react-iframe.git"
1010
},
1111
"license": "MIT",
1212
"main": "./cjs/index.js",
@@ -22,7 +22,7 @@
2222
"access": "public"
2323
},
2424
"keywords": [
25-
"react-monorepo-template",
25+
"react-iframe",
2626
"react.js",
2727
"react",
2828
"template",
@@ -32,6 +32,7 @@
3232
"uiw-react",
3333
"react-component",
3434
"component",
35+
"iframe",
3536
"components",
3637
"ui",
3738
"css",
@@ -47,7 +48,9 @@
4748
"@babel/runtime": "^7.18.9",
4849
"@types/react": "^18.0.17",
4950
"@types/react-dom": "^18.0.6",
51+
"@types/react-test-renderer": "^18.0.0",
5052
"react": "^18.2.0",
51-
"react-dom": "^18.2.0"
53+
"react-dom": "^18.2.0",
54+
"react-test-renderer": "^18.2.0"
5255
}
5356
}

0 commit comments

Comments
 (0)