Skip to content

Commit 49f0d7c

Browse files
raymond-lamraymond-lam
committed
Fix stylesheet dependencies
Fix stylesheet dependencies and fix some of the actual styling. - Make bootstrap a peer dependency. - Use FontAwesomeIcon React component rather than classes. - Fix some of the styling.
1 parent d268115 commit 49f0d7c

26 files changed

+466
-828
lines changed

‎docs/Usage.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
# Usage
22

3-
Various code snippets and explanations of how they work with the Form Builder
3+
## Dependencies
4+
5+
As the peer dependencies indicate, the React JSON Schema Form Builder depends on the [bootstrap](https://www.npmjs.com/package/bootstrap) package. Ensure that it is installed in your app, and include the stylesheet by importing it in the main module of your app:
6+
7+
```react
8+
import 'bootstrap/dist/css/bootstrap.min.css';
9+
```
410

511
## FormBuilder Component
612

‎example/package-lock.json

Lines changed: 51 additions & 261 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@ginkgo-bioworks/react-json-schema-form-builder": "file:..",
1919
"@rjsf/bootstrap-4": "^2.4.1",
2020
"@rjsf/core": "^2.4.1",
21+
"bootstrap": "^4.6.0",
2122
"jsoneditor": "^9.1.7",
2223
"jsoneditor-react": "^3.1.0",
2324
"react": "^16.14.0",

‎example/src/index.js

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,9 @@ import ReactDOM from 'react-dom';
33
import App from './App';
44
import * as serviceWorker from './serviceWorker';
55

6-
ReactDOM.render(
7-
<React.Fragment>
8-
<head>
9-
<link
10-
rel='stylesheet'
11-
href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
12-
integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T'
13-
crossOrigin='anonymous'
14-
/>
15-
<link
16-
rel='stylesheet'
17-
href='https://use.fontawesome.com/releases/v5.11.2/css/all.css'
18-
/>
19-
<link
20-
rel='stylesheet'
21-
href='https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css'
22-
/>
23-
</head>
24-
<App />
25-
</React.Fragment>,
26-
document.getElementById('root'),
27-
);
6+
import 'bootstrap/dist/css/bootstrap.min.css';
7+
8+
ReactDOM.render(<App />, document.getElementById('root'));
289

2910
// If you want your app to work offline and load faster, you can change
3011
// unregister() to register() below. Note this comes with some pitfalls.

0 commit comments

Comments
 (0)