added useScopedState to allow users to get access to scoped values

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.41.0 (Feb 23rd, 2023)
+
+### Added
+
+- `useScopedState` to allow users to get access to scoped values
+
 ## 4.40.2 (Feb 21st, 2023)
 
 ### Added

src/hooks/useScopedState.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ScopeContext } from '../Context';
+import { useFieldState } from './useFieldState';
+
+/* ----------------------- useScope ----------------------- */
+export function useScopedState() {
+  const scope = useContext(ScopeContext);
+  return useFieldState(scope);
+}

src/index.js

@@ -38,6 +38,7 @@ import { useMultistepApi } from './hooks/useMultistepApi';
 import { useMultistepState } from './hooks/useMultistepState';
 import { useScope } from './hooks/useScope';
 import { useScoper } from './hooks/useScoper';
+import { useScopedState } from './hooks/useScopedState';
 import { useRelevance } from './hooks/useRelevance';
 import { useConditional } from './hooks/useConditional';
 import { useInformed } from './hooks/useInformed';
@@ -69,6 +70,7 @@ export {
   useInformed,
   useScope,
   useScoper,
+  useScopedState,
   useRelevance,
   useConditional,
   ArrayField,

stories/Scope/useScopedState/README.md

@@ -0,0 +1,52 @@
+# useScopedState
+
+Sometimes you need to scope specific fields ( group them ). This is easily achieved with the use of `Scope`. But then, you may also want to access that scopes state, this can be done with `useScopedState`.
+
+<!-- STORY -->
+
+```jsx
+import { Form, Input, Scope, useScopedState } from 'informed';
+
+const initialValues = {
+  name: 'Elon',
+  age: 50,
+  spouse: {
+    name: 'Talulah',
+    age: 36
+  },
+  mother: {
+    name: 'Maye',
+    age: 74
+  }
+};
+
+const ComponentUsingScopedState = () => {
+  const state = useScopedState();
+  return (
+    <pre>
+      <code>{JSON.stringify(state, null, 2)}</code>
+    </pre>
+  );
+};
+
+const ScopeComonent = () => (
+  <Form initialValues={initialValues}>
+    <h3>Your Info</h3>
+    <Input name="name" label="First name:" />
+    <Input name="age" label="Age:" type="number" />
+    <Scope scope="spouse">
+      <h3>Spouses Info</h3>
+      <Input name="name" label="First name:" />
+      <Input name="age" label="Age:" type="number" />
+      <ComponentUsingScopedState />
+    </Scope>
+    <br />
+    <Scope scope="mother">
+      <h3>Mothers Info</h3>
+      <Input name="name" label="First name:" />
+      <Input name="age" label="Age:" type="number" />
+      <ComponentUsingScopedState />
+    </Scope>
+  </Form>
+);
+```

stories/Scope/useScopedState/index.js

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import withDocs from '../../utils/withDocs';
+import readme from './README.md';
+
+import { Form, Input, Scope, useScopedState } from '../../../src';
+
+const initialValues = {
+  name: 'Elon',
+  age: 50,
+  spouse: {
+    name: 'Talulah',
+    age: 36
+  },
+  mother: {
+    name: 'Maye',
+    age: 74
+  }
+};
+
+const ComponentUsingScopedState = () => {
+  const state = useScopedState();
+  return (
+    <pre>
+      <code>{JSON.stringify(state, null, 2)}</code>
+    </pre>
+  );
+};
+
+const ScopeComonent = () => {
+  // const formApiRef = useRef();
+
+  // const onClick = () => {
+  //   formApiRef.current.resetPath('spouse');
+  // };
+
+  return (
+    <Form initialValues={initialValues}>
+      <h3>Your Info</h3>
+      <Input name="name" label="First name:" />
+      <Input name="age" label="Age:" type="number" />
+      <Scope scope="spouse">
+        <h3>Spouses Info</h3>
+        <Input name="name" label="First name:" />
+        <Input name="age" label="Age:" type="number" />
+        <ComponentUsingScopedState />
+      </Scope>
+      <br />
+      <Scope scope="mother">
+        <h3>Mothers Info</h3>
+        <Input name="name" label="First name:" />
+        <Input name="age" label="Age:" type="number" />
+        <ComponentUsingScopedState />
+      </Scope>
+      {/* <button type="button" onClick={onClick}>
+        Reset Spouse
+      </button> */}
+    </Form>
+  );
+};
+
+export default withDocs(readme, ScopeComonent);

stories/index.js

@@ -135,6 +135,7 @@ import ChangingSchema from './Schema/ChangingSchema';
 import KeepStateIfRelevant from './KeepState/KeepStateIfRelevant';
 import Keep from './KeepState/Keep';
 import TableFields from './Conditionals/TableFields';
+import useScopedState from './Scope/useScopedState';
 
 addDecorator(StoryWrapper);
 
@@ -266,7 +267,9 @@ storiesOf('KeepState', module)
   .add('Keep State If Relevant', KeepStateIfRelevant)
   .add('Keep', Keep);
 
-storiesOf('Scope', module).add('Scope Comonent', ScopeComponent);
+storiesOf('Scope', module)
+  .add('Scope Comonent', ScopeComponent)
+  .add('useScopedState', useScopedState);
 
 storiesOf('Schema', module)
   .add('Schema', Schema)
@@ -305,7 +308,8 @@ storiesOf('Hooks!', module)
   .add('useFieldState', UseFieldState)
   .add('useForm', UseForm)
   .add('useField', UseField)
-  .add('useFormStateSelector', UseFormStateSelector);
+  .add('useFormStateSelector', UseFormStateSelector)
+  .add('useScopedState', useScopedState);
 
 storiesOf('Multistep Forms', module)
   .add('BasicMultistep', BasicMultistep)