Document JsonFormsStyleContext

* Add 'JsonFormsStyleContext' to 'Styles.md' file * Link 'Styles.md' in README
eclipsesource · Dec 17, 2020 · bbe2fab · bbe2fab
1 parent 1e4fa6a
commit bbe2fab
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 53 deletions.
diff --git a/packages/vanilla/README.md b/packages/vanilla/README.md
@@ -10,6 +10,8 @@ You can combine [JSONForms React](https://www.npmjs.com/package/@jsonforms/react
 
 Check https://www.npmjs.com/search?q=%40jsonforms for all published JSONForms packages.
 
+If you want to customize styling, have a look at our [styles guide](Styles.md).
+
 # License
 The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.
 

diff --git a/packages/vanilla/Styles.md b/packages/vanilla/Styles.md
@@ -52,50 +52,12 @@
 - input.description &rightarrow; id for the description of control
 
 ## Example of styling id contributions
-You can either contribute all styles yourself or adapt an existing style definition.
-
-### Define all styles from scratch
-If you want to define all styles yourself, you can hand them into JsonForms's store.
-
-```typescript
-import { vanillaStyles } from '../src/util';
-import { stylingReducer } from '../src/reducers';
-const store: Store<JsonFormsState> = createStore(
-    combineReducers({ jsonforms: jsonformsReducer({ styles: stylingReducer }) }),
-    {
-      jsonforms: {
-        styles: vanillaStyles,
-        ...other
-      }
-    }
-  );
-```
-The styles themselves look like this:
-```typescript
-export const vanillaStyles = [
-  {
-    name: 'horizontal.layout',
-    classNames: ['horizontal-layout']
-  },
-  {
-    name: 'horizontal.layout.item',
-    classNames: numberOfChildren => ['horizontal-layout' + numberOfChildren[0]]
-  }
-];
-```
-So you can either provide a simple `name` to `classNames` mapping using strings where `classNames` must be an array of strings.
-Or you can provide a function for `classNames` which returns an array of strings. The second method allows you to provide classes as needed for some layouts like bootstrap.
-
-### Adapt an existing style definition
-You can also adapt an existing style definition by adding new styles or removing existing ones.
-For this, you can use the JsonForms _styling reducer_ and its corresponding actions.
+Overwrite the default styles via the `JsonFormsStyleContext`.
 
 ```typescript
-import { registerStyles, stylingReducer, vanillaStyles } from '@jsonforms/vanilla-renderers';
+import { JsonFormsStyleContext } from '@jsonforms/vanilla-renderers';
 
-// Setup adapted styles by creating a register styles action and applying it
-// to the vanilla styles by invoking the stylingReducer with the action.
-const registerStylesAction = registerStyles([
+const styleContextValue = { styles: [
   {
     name: 'control.input',
     classNames: ['custom-input']
@@ -104,16 +66,14 @@ const registerStylesAction = registerStyles([
     name: 'array.button',
     classNames: ['custom-array-button']
   }
-]);
-const adaptedStyles = stylingReducer(vanillaStyles, registerStylesAction);
+]};
 
-const store: Store<JsonFormsState> = createStore(
-    combineReducers({ jsonforms: jsonformsReducer({ styles: stylingReducer }) }),
-    {
-      jsonforms: {
-        styles: adaptedStyles,
-        ...other
-      }
-    }
-  );
-```
+<JsonFormsStyleContext.Provider value={styleContextValue}>
+  <JsonForms
+    data={data}
+    schema={schema}
+    uischema={uischema}
+    ...
+  />
+</JsonFormsStyleContext.Provider>
+```