Skip to content

Commit 0b555fc

Browse files
authored
Merge pull request #3 from jsdotlua/docs/package-readmes
feat: Add package READMEs
2 parents 11ec791 + 941252a commit 0b555fc

File tree

7 files changed

+534
-0
lines changed

7 files changed

+534
-0
lines changed

packages/react-debug-tools/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# `react-debug-tools`
2+
3+
This is an experimental package for debugging React renderers.
4+
5+
**Its API is not as stable as that of React, React Native, React DOM, or React Roblox, and does not follow the common versioning scheme.**
6+
7+
**Use it at your own risk.**

packages/react-is/README.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# `react-is`
2+
3+
**NOTE:** This README is copied directly from React upstream.
4+
5+
This package allows you to test arbitrary values and see if they're a particular React element type.
6+
7+
## Installation
8+
9+
```sh
10+
# Yarn
11+
yarn add react-is
12+
13+
# NPM
14+
npm install react-is
15+
```
16+
17+
## Usage
18+
19+
### Determining if a Component is Valid
20+
21+
```js
22+
import React from "react";
23+
import * as ReactIs from "react-is";
24+
25+
class ClassComponent extends React.Component {
26+
render() {
27+
return React.createElement("div");
28+
}
29+
}
30+
31+
const FunctionComponent = () => React.createElement("div");
32+
33+
const ForwardRefComponent = React.forwardRef((props, ref) =>
34+
React.createElement(Component, { forwardedRef: ref, ...props })
35+
);
36+
37+
const Context = React.createContext(false);
38+
39+
ReactIs.isValidElementType("div"); // true
40+
ReactIs.isValidElementType(ClassComponent); // true
41+
ReactIs.isValidElementType(FunctionComponent); // true
42+
ReactIs.isValidElementType(ForwardRefComponent); // true
43+
ReactIs.isValidElementType(Context.Provider); // true
44+
ReactIs.isValidElementType(Context.Consumer); // true
45+
ReactIs.isValidElementType(React.createFactory("div")); // true
46+
```
47+
48+
### Determining an Element's Type
49+
50+
#### Context
51+
52+
```js
53+
import React from "react";
54+
import * as ReactIs from 'react-is';
55+
56+
const ThemeContext = React.createContext("blue");
57+
58+
ReactIs.isContextConsumer(<ThemeContext.Consumer />); // true
59+
ReactIs.isContextProvider(<ThemeContext.Provider />); // true
60+
ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
61+
ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true
62+
```
63+
64+
#### Element
65+
66+
```js
67+
import React from "react";
68+
import * as ReactIs from 'react-is';
69+
70+
ReactIs.isElement(<div />); // true
71+
ReactIs.typeOf(<div />) === ReactIs.Element; // true
72+
```
73+
74+
#### Fragment
75+
76+
```js
77+
import React from "react";
78+
import * as ReactIs from 'react-is';
79+
80+
ReactIs.isFragment(<></>); // true
81+
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
82+
```
83+
84+
#### Portal
85+
86+
```js
87+
import React from "react";
88+
import ReactDOM from "react-dom";
89+
import * as ReactIs from 'react-is';
90+
91+
const div = document.createElement("div");
92+
const portal = ReactDOM.createPortal(<div />, div);
93+
94+
ReactIs.isPortal(portal); // true
95+
ReactIs.typeOf(portal) === ReactIs.Portal; // true
96+
```
97+
98+
#### StrictMode
99+
100+
```js
101+
import React from "react";
102+
import * as ReactIs from 'react-is';
103+
104+
ReactIs.isStrictMode(<React.StrictMode />); // true
105+
ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
106+
```

packages/react-reconciler/README.md

Lines changed: 339 additions & 0 deletions
Large diffs are not rendered by default.

packages/react-roblox/README.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# `react-roblox`
2+
3+
This package serves as a Roblox renderer for React. It is intended to be paired with the generic React package, which is shipped as `core-packages/react` to Wally.
4+
5+
## Usage
6+
7+
```lua
8+
local React = require(Path.To.React)
9+
local ReactRoblox = require(Path.To.ReactRoblox)
10+
11+
local function App()
12+
return React.createElement("TextLabel", {
13+
Text = "Hello, world!"
14+
})
15+
end
16+
17+
local element = React.createElement(App)
18+
19+
local root = ReactRoblox.createRoot(Instance.new("Folder"))
20+
root:render(ReactRoblox.createPortal(element, playerGui))
21+
```
22+
23+
## API
24+
25+
TODO

packages/react/README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# `react`
2+
3+
React is a library for creating user interfaces.
4+
5+
The `react` package contains only the functionality necessary to define React components. It is typically used together with a React renderer like `react-roblox`.
6+
7+
## Usage
8+
9+
```lua
10+
local React = require(Path.To.React)
11+
local ReactRoblox = require(Path.To.ReactRoblox)
12+
13+
local e = React.createElement
14+
local useState = React.useState
15+
16+
local function Counter()
17+
local count, setCount = useState(0)
18+
19+
return e("Frame", {}, {
20+
CurrentCount = e("TextLabel", {
21+
Text = count,
22+
...
23+
}),
24+
IncrementButton = e("TextButton", {
25+
Text = "Increment",
26+
...,
27+
28+
[React.Event.Activated] = function()
29+
setCount(count + 1)
30+
end
31+
})
32+
})
33+
end
34+
35+
local root = ReactRoblox.createRoot(Instance.new("Folder"))
36+
root:render(ReactRoblox.createPortal(e(Counter), playerGui))
37+
```
38+
39+
## Documentation
40+
41+
See https://react.dev/
42+
43+
## API
44+
45+
See https://react.dev/reference/react

packages/roact-compat/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# `roact-compat`
2+
3+
This package serves as a compatibility bridge between `react` and legacy [`Roact`](https://github.com/Roblox/roact). It can be used when migrating an existing codebase to React, but new code shouldn't use this package.
4+
5+
## API
6+
7+
TODO

packages/scheduler/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# `scheduler`
2+
3+
This is a package for cooperative scheduling in a Lua environment. It is currently used internally by React, but we plan to make it more generic.
4+
5+
The public API for this package is not yet finalized.

0 commit comments

Comments
 (0)