useScope will now return current scope when nothing is passed in

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.41.1 (Feb 23rd, 2023)
+
+### Added
+
+- `useScope` will now return current scope when nothing is passed in.
+
 ## 4.41.0 (Feb 23rd, 2023)
 
 ### Added

index.d.ts

@@ -304,7 +304,7 @@ export function useFieldApi(name: string, scoped?: boolean): FieldApi;
 
 export function useFieldState(name: string, scoped?: boolean): FieldState;
 
-export function useScope(name: string): string;
+export function useScope(name?: string): string;
 
 export function useScoper(name: string): (name: string) => string;
 

src/hooks/useScope.js

@@ -20,5 +20,12 @@ export function useScope(name) {
   if (scope && name) {
     return `${scope}.${name}`;
   }
-  return name;
+
+  // Return what was passed
+  if (name) {
+    return name;
+  }
+
+  // If nothing passed reuturn the scope
+  return scope;
 }

stories/Scope/useScope/README.md

@@ -0,0 +1,67 @@
+# useScope
+
+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 you are in, this can be done with `useScope`.
+
+Note: you can also use this to scope a given string!
+
+<!-- STORY -->
+
+```jsx
+import { Form, Input, Scope, useScope } from 'informed';
+
+const initialValues = {
+  name: 'Elon',
+  age: 50,
+  spouse: {
+    name: 'Talulah',
+    age: 36
+  },
+  mother: {
+    name: 'Maye',
+    age: 74
+  }
+};
+
+const WhereAmI = () => {
+  const scope = useScope();
+  return (
+    <div style={{ margin: '1rem' }}>
+      You are within <strong>{scope}</strong>s scope.
+    </div>
+  );
+};
+
+const ScopeThis = ({ name }) => {
+  const scopedName = useScope(name);
+  return (
+    <div style={{ margin: '1rem' }}>
+      Scoped name <strong>{scopedName}</strong>.
+    </div>
+  );
+};
+
+const ScopeComonent = () => (
+  <Form initialValues={initialValues}>
+    <h3>Your Info</h3>
+    <Input name="name" label="First name:" />
+    <Input name="age" label="Age:" type="number" />
+    <WhereAmI />
+    <ScopeThis name="hello" />
+    <Scope scope="spouse">
+      <h3>Spouses Info</h3>
+      <Input name="name" label="First name:" />
+      <Input name="age" label="Age:" type="number" />
+      <WhereAmI />
+      <ScopeThis name="hello" />
+    </Scope>
+    <br />
+    <Scope scope="mother">
+      <h3>Mothers Info</h3>
+      <Input name="name" label="First name:" />
+      <Input name="age" label="Age:" type="number" />
+      <WhereAmI />
+      <ScopeThis name="hello" />
+    </Scope>
+  </Form>
+);
+```

stories/Scope/useScope/index.js

@@ -0,0 +1,74 @@
+import React, { useRef } from 'react';
+import withDocs from '../../utils/withDocs';
+import readme from './README.md';
+
+import { Form, Input, Scope, useScope } from '../../../src';
+
+const initialValues = {
+  name: 'Elon',
+  age: 50,
+  spouse: {
+    name: 'Talulah',
+    age: 36
+  },
+  mother: {
+    name: 'Maye',
+    age: 74
+  }
+};
+
+const WhereAmI = () => {
+  const scope = useScope();
+  return (
+    <div style={{ margin: '1rem' }}>
+      You are within <strong>{scope}</strong>s scope.
+    </div>
+  );
+};
+
+const ScopeThis = ({ name }) => {
+  const scopedName = useScope(name);
+  return (
+    <div style={{ margin: '1rem' }}>
+      Scoped name <strong>{scopedName}</strong>.
+    </div>
+  );
+};
+
+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" />
+      <WhereAmI />
+      <ScopeThis name="hello" />
+      <Scope scope="spouse">
+        <h3>Spouses Info</h3>
+        <Input name="name" label="First name:" />
+        <Input name="age" label="Age:" type="number" />
+        <WhereAmI />
+        <ScopeThis name="hello" />
+      </Scope>
+      <br />
+      <Scope scope="mother">
+        <h3>Mothers Info</h3>
+        <Input name="name" label="First name:" />
+        <Input name="age" label="Age:" type="number" />
+        <WhereAmI />
+        <ScopeThis name="hello" />
+      </Scope>
+      {/* <button type="button" onClick={onClick}>
+        Reset Spouse
+      </button> */}
+    </Form>
+  );
+};
+
+export default withDocs(readme, ScopeComonent);

stories/index.js

@@ -136,6 +136,7 @@ import KeepStateIfRelevant from './KeepState/KeepStateIfRelevant';
 import Keep from './KeepState/Keep';
 import TableFields from './Conditionals/TableFields';
 import useScopedState from './Scope/useScopedState';
+import useScope from './Scope/useScope';
 
 addDecorator(StoryWrapper);
 
@@ -269,6 +270,7 @@ storiesOf('KeepState', module)
 
 storiesOf('Scope', module)
   .add('Scope Comonent', ScopeComponent)
+  .add('useScope', useScope)
   .add('useScopedState', useScopedState);
 
 storiesOf('Schema', module)
@@ -309,6 +311,7 @@ storiesOf('Hooks!', module)
   .add('useForm', UseForm)
   .add('useField', UseField)
   .add('useFormStateSelector', UseFormStateSelector)
+  .add('useScope', useScope)
   .add('useScopedState', useScopedState);
 
 storiesOf('Multistep Forms', module)