Working with react in peer dependencies and

removed styles directory

Author: lukefrogger

package-lock.json

@@ -27,6 +27,9 @@
     "react-final-form": "^6.5.7",
     "react-number-format": "^4.9.1"
   },
+  "peerDependencies": {
+    "react": "^16.8.6"
+  },
   "scripts": {
     "start": "craco start",
     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
@@ -66,7 +69,6 @@
     "babel-preset-minify": "^0.5.1",
     "node-sass": "^4.14.1",
     "postcss": "^7.0.39",
-    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.1",
     "react-scripts": "4.0.3",

package.json

@@ -1,4 +1,3 @@
-import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import ManagedForm from './examples/ManagedForm';
 import HookParent from './examples/hookForm/Parent';

src/App.css

@@ -1,15 +1,15 @@
-import { createContext, useContext, useState } from 'react';
+import React from 'react';
 
-export const FormsContext = createContext({});
+export const FormsContext = React.createContext({});
 
 export const FetchFormsProvider = ({ permission, children }) => {
-  const [token] = useState(permission);
+  const [token] = React.useState(permission);
 
   return (
     <FormsContext.Provider value={token}>{children}</FormsContext.Provider>
   );
 };
 
 export const usePermission = () => {
-  return useContext(FormsContext);
+  return React.useContext(FormsContext);
 };

src/App.js

@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Form } from 'react-final-form';
 import useFetchForms from '../hooks/useFetchForms';
 import FetchFormItem from './form/FetchFormItem';
 import { validate } from '../scripts/Validations';
-import '../styles/index.scss';
+import '../../../lib_styles/index.scss';
 
 const FetchForm = ({ slug, showFormError, onSubmit }) => {
   const [fetchForm, loading, error, doCloudSubmit] = useFetchForms(slug);
-  const [validations, setValidations] = useState({});
-  const [submitError, setSubmitError] = useState(false);
+  const [validations, setValidations] = React.useState({});
+  const [submitError, setSubmitError] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (fetchForm) {
       setValidations(
         fetchForm.formItems.map((item) => ({
@@ -21,7 +21,7 @@ const FetchForm = ({ slug, showFormError, onSubmit }) => {
     }
   }, [fetchForm]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (showFormError) {
       setSubmitError(showFormError);
     }

src/lib/exports/FetchFormsProvider.js

@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import React from 'react';
 import FetchLabel from '../FetchLabel';
 
 const FetchFormRadio = ({ label, options, fieldName, html }) => {
-  const [checked, setChecked] = useState('');
+  const [checked, setChecked] = React.useState('');
 
   return (
     <div className='radio-group'>

src/lib/exports/components/FetchForm.js

@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react';
+import React from 'react';
 import { usePermission } from '../FetchFormsProvider';
 
 const useFetchForms = (id, json) => {
-  const [fetchForm, setFetchForm] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
+  const [fetchForm, setFetchForm] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(false);
   const token = usePermission();
 
-  useEffect(() => {
+  React.useEffect(() => {
     const unsubscribe = async () => {
       setLoading(true);