FeatureDescription type export; fix README

README.md

@@ -20,7 +20,7 @@ Then most users will use it in the following manner:
 
 ```typescript
 import React, { lazy } from 'react';
-import { Features, ToggleFeature, Disable, Enable, FeatureDescription } from 'react-enable';
+import { Features, ToggleFeatures, Disable, Enable, FeatureDescription } from 'react-enable';
 
 const NewVersion = lazy(() => import('./src/new-version'));
 const OldVersion = lazy(() => import('./src/old-version'));

src/ToggleFeatures.tsx

@@ -185,7 +185,7 @@ function ShadowContent({ root, children }: { children: ReactNode; root: Element
 /// a list of features to toggle and their current override state. you can override on or override off,
 /// or unset the override and go back to default value.
 // eslint-disable-next-line no-undef
-export function ToggleFeatures({ defaultOpen = false }: { defaultOpen?: boolean }): JSX.Element | null {
+export function ToggleFeatures({ defaultOpen = false, hidden = false }: { defaultOpen?: boolean; hidden?: boolean }): JSX.Element | null {
   const [root, setCoreRoot] = useState<HTMLDivElement | null>(null);
 
   const setRoot = (host: HTMLDivElement | null) => {
@@ -201,6 +201,10 @@ export function ToggleFeatures({ defaultOpen = false }: { defaultOpen?: boolean
     setCoreRoot(renderDiv);
   };
 
+  if (hidden) {
+    return null;
+  }
+
   return (
     <div ref={setRoot} style={{ zIndex: 99999, position: 'fixed', width: '0', height: '0', bottom: 0 }}>
       {root != null ? (
@@ -214,14 +218,18 @@ export function ToggleFeatures({ defaultOpen = false }: { defaultOpen?: boolean
 
 /// Like ToggleFeatures, but does not inject styles into a shadow DOM root node.
 /// useful if you're using tailwind.
-export function ToggleFeatureUnwrapped({ defaultOpen = false }: { defaultOpen?: boolean }): JSX.Element | null {
+export function ToggleFeatureUnwrapped({ defaultOpen = false, hidden = false }: { defaultOpen?: boolean; hidden?: boolean }): JSX.Element | null {
   const [open, setOpen] = useState(defaultOpen);
   const context = useContext(FeatureContext);
 
   if (context == null) {
     return null;
   }
 
+  if (hidden) {
+    return null;
+  }
+
   // We want: Real value after all nestings, value of the override. we toggle override
   const { featuresDescription } = context;
 

src/index.tsx

@@ -8,6 +8,6 @@ export { useAllDisabled } from './useAllDisabled';
 export { useAllEnabled } from './useAllEnabled';
 export type { EnableContextType } from './EnableContext';
 export type { FeatureContextType } from './FeatureContext';
-export type { FeatureValue, FeatureState, FeatureDispatch } from './FeatureState';
+export type { FeatureValue, FeatureState, FeatureDescription, FeatureDispatch } from './FeatureState';
 export { EnableContext } from './EnableContext';
 export { ToggleFeatures } from './ToggleFeatures';