https://github.com/nicoraynaud/react-widget
How to create an embeddable widget from a React App
https://github.com/nicoraynaud/react-widget
Last synced: 3 months ago
JSON representation
How to create an embeddable widget from a React App
- Host: GitHub
- URL: https://github.com/nicoraynaud/react-widget
- Owner: nicoraynaud
- Created: 2021-02-03T14:56:17.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-02-03T16:50:59.000Z (about 4 years ago)
- Last Synced: 2024-08-03T22:24:16.173Z (7 months ago)
- Language: JavaScript
- Size: 652 KB
- Stars: 55
- Watchers: 3
- Forks: 28
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - nicoraynaud/react-widget - How to create an embeddable widget from a React App (JavaScript)
README
# Sample React App as an Embeddable Widget
This is a widget used for displaying a stock symbol, name, price and intraday variation in an embeddable div.
Here is an example of the 3 widget items in the same page :
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Purpose and disclaimer
This project is a demo aiming at showing how one can build an embeddable React widget from a React App.
The full blog post explaining how it works is available [here](https://tekinico.medium.com/build-a-react-embeddable-widget-c46b7f7999d8).
## How to use
### `npm install`
Install all dependencies
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `npm build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm build:widget`
Builds the app as an embeddable widget. Creates two files :
- index.js
- index.css
That can be included in any web page to trigger the load of the widget.
## Integration
Once built, the widget can be integrated by creating a div with the proper class identifier and parameters (here we use a stock symbol as parameter), and referencing the js and css files as resources.
**Note that the resources should only be included once in a page, even if injecting the widget several times.**
Here follows an example integration :
```html
...
...
...
...
```