Read only property added to Builder component and all other relevan c…

…omponents. Readme update

README.md

@@ -79,6 +79,7 @@ const components: BuilderComponentsProps = {
 
 const MyBuilder: React.FC = () => (
   <Builder
+    readOnly={false}
     fields={fields}
     data={data}
     components={components}
@@ -91,7 +92,7 @@ const MyBuilder: React.FC = () => (
 
 ## Configuration
 
-Since React Query Builder is highly configurable, you can define look of the Query Builder, you can define and use your own components and of course, you will need to set up fields Query Builder will be using.
+Since React Query Builder is highly configurable, you can define look of the Query Builder, you can define and use your own components, set whether the Builder should be readOnly or not and of course, you will need to set up fields Query Builder will be using.
 
 ### Lets start with fields...
 
@@ -306,4 +307,5 @@ export const QueryBuiler:React.FC = () => {
 * [ ] Drag and Drop user interface
 * [ ] More examples and demos
 * [x] Tests (after version 0.2.5)
+* [x] Read only property on Buidler component
 * [ ] Separate functionality to standalone API (in version 0.3.0)

example/index.tsx

@@ -7,11 +7,11 @@ import { Builder, BuilderFieldProps } from '../src';
 import { colors } from '../src/constants/colors';
 
 const Code = styled.pre`
-  background: ${colors.light};
-  border: 1px solid ${colors.darker};
-  padding: 1rem;
   margin: 1rem 0;
+  padding: 1rem;
   font-size: 0.7rem;
+  background: ${colors.light};
+  border: 1px solid ${colors.darker};
 `;
 
 export const queryTree = [
@@ -108,15 +108,19 @@ export const fields: BuilderFieldProps[] = [
 ];
 
 const App = () => {
-  // const data = assignIDs(queryTree);
   const [output, setOutput] = React.useState(queryTree);
+  const [readOnly, setReadOnly] = React.useState(false);
 
   return (
     <>
+      <a href="#" onClick={() => setReadOnly(!readOnly)}>
+        Read Only
+      </a>
       <Builder
         data={queryTree}
         fields={fields}
-        onChange={data => setOutput(data)}
+        readOnly={readOnly}
+        onChange={setOutput}
       />
 
       <h3>Output</h3>