Skip to content

Commit f7d45cc

Browse files
artemiogomez-lectraartemiogomez-lectra
authored
Merge pull request #27 from r-cabanas/chore/update-example-app-react-19
Update the Example application to React 19
2 parents d5cdaa1 + ba80f07 commit f7d45cc

12 files changed

Lines changed: 2575 additions & 17580 deletions

File tree

‎.eslintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"parser": "@babel/eslint-parser",
33
"extends": ["standard", "standard-react"],
4+
"ignorePatterns": ["example/**"],
45
"env": {
56
"es6": true,
67
"browser": true,

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,5 @@ dist
2323
npm-debug.log*
2424
yarn-debug.log*
2525
yarn-error.log*
26+
27+
.vscode

‎README.md‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,15 @@ npm install @lectra/ld-react-feature-flags
1717
```
1818

1919
## Getting Started
20+
2021
### FlagsProvider
21-
Wrap your root component with `FlagsProvider` to make LaunchDarkly client instance accessible to all children components thanks to React context.
2222

23+
Wrap your root component with `FlagsProvider` to make LaunchDarkly client instance accessible to all children components thanks to React context.
2324

2425
```javascript
26+
// React 17 and lower
27+
28+
import ReactDOM from 'react-dom';
2529
import { FlagsProvider } from '@lectra/ld-react-feature-flags';
2630

2731
ReactDOM.render(
@@ -32,6 +36,21 @@ ReactDOM.render(
3236
);
3337
```
3438

39+
```javascript
40+
// React 18 and higher
41+
42+
import { createRoot } from 'react-dom/client';
43+
import { FlagsProvider } from '@lectra/ld-react-feature-flags';
44+
45+
const root = createRoot(document.getElementById('root'));
46+
47+
root.render(
48+
<FlagsProvider user={user} clientkey="myClientKey" loadingComponent ={<div>please wait</div>}>
49+
<App />
50+
</FlagsProvider>
51+
);
52+
```
53+
3554
| Prop | Type | Required | Description |
3655
|------------------|-----------|----------|------------------------------|
3756
| user | Object | true | User information |
@@ -40,6 +59,7 @@ ReactDOM.render(
4059
| loadingComponent | Component | false | Loading component / string |
4160

4261
### Flags
62+
4363
All `Flags` components get the _ldClient_ instance thanks to the `FlagsProvider` component.
4464

4565
To render a node or a component based on your flags, you must pass a `flag` props.
@@ -121,6 +141,7 @@ import { Flags } from '@lectra/ld-react-feature-flags';
121141
```
122142

123143
### WithFlags
144+
124145
Same as `Flags` components but in a Higher Order Component way.
125146

126147
`WithFlags([flag])([ComponentToRenderIfTrue][ComponentToRenderIfFalse])`
@@ -154,6 +175,7 @@ const HeaderFeatureFlipped = WithFlags("beta-only")(HBeta, HStandard)
154175

155176
<HeaderFeatureFlipped></HeaderFeatureFlipped>
156177
```
178+
157179
#### Component render with multivariant flag
158180

159181
```javascript
@@ -170,6 +192,7 @@ const HeaderFeatureFlippedWithColor = WithFlags("header-bg-color")(HeaderWithCol
170192

171193

172194
## Example
195+
173196
This project contains some examples that you could run.
174197

175198
```bash
@@ -180,5 +203,5 @@ npm start
180203
```
181204

182205
## License
183-
MIT
184206

207+
MIT

‎example/README.md‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
# Project Example
1+
# Project Example
22

3-
> Project Example that shows how to use `ld-react-feature-flags` in a React app.
3+
An example React 19 application that demonstrates how to use the `@lectra/ld-react-feature-flags` library.
44

55
## Getting Started
6-
```bash
7-
git clone https://github.com/lectra-tech/ld-react-feature-flags.git
8-
cd ld-react-feature-flags/example
9-
npm install
10-
npm start
11-
```
6+
7+
1. Run the following commands:
8+
9+
```bash
10+
git clone https://github.com/lectra-tech/ld-react-feature-flags.git
11+
cd ld-react-feature-flags/example
12+
npm ci
13+
npm start
14+
```
15+
16+
2. Open a browser to the stated URL. (Typically <a href="http://localhost:5173" target="_blank">http://localhost:5173</a>)

‎example/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<link rel="manifest" href="/manifest.json">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
11+
12+
<title>ld-react-feature-flags</title>
13+
</head>
14+
15+
<body>
16+
<noscript>
17+
You need to enable JavaScript to run this app.
18+
</noscript>
19+
20+
<div id="root"></div>
21+
<script type="module" src="/src/index.jsx"></script>
22+
</body>
23+
24+
</html>

0 commit comments

Comments
 (0)