recoil#RecoilRoot TypeScript Examples

The following examples show how to use recoil#RecoilRoot. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.tsx    From ow-mod-manager with MIT License 6 votes vote down vote up 
App = () => (
  <ErrorBoundary>
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <ErrorBoundary>
          <SettingsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <LocalModsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <RemoteModsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <LogsSubscription />
        </ErrorBoundary>
        <ErrorBoundary>
          <MainView />
        </ErrorBoundary>
      </ThemeProvider>
    </RecoilRoot>
  </ErrorBoundary>
)
Example #2
Source File: index.tsx    From phonepare with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
)
Example #3
Source File: Root.tsx    From react-pwa with MIT License 6 votes vote down vote up 
function render(App: ComponentType) {
  root.render(
    <StrictMode>
      <RecoilRoot>
        <HelmetProvider>
          <ThemeProvider>
            <App />
          </ThemeProvider>
        </HelmetProvider>
      </RecoilRoot>
    </StrictMode>,
  );
}
Example #4
Source File: render-helper.tsx    From clean-react with GNU General Public License v3.0 6 votes vote down vote up 
renderWithHistory = ({ Page, history, account = mockAccountModel(), states = [] }: Params): Result => {
  const setCurrentAccountMock = jest.fn()
  const mockedState = {
    setCurrentAccount: setCurrentAccountMock,
    getCurrentAccount: () => account
  }
  const initializeState = ({ set }: MutableSnapshot): void => {
    [...states, { atom: currentAccountState, value: mockedState }].forEach(state => set(state.atom, state.value))
  }
  render(
    <RecoilRoot initializeState={initializeState}>
      <Router history={history}>
        <Page />
      </Router>
    </RecoilRoot>
  )
  return {
    setCurrentAccountMock
  }
}
Example #5
Source File: router.tsx    From clean-react with GNU General Public License v3.0 6 votes vote down vote up 
Router: React.FC = () => {
  const state = {
    setCurrentAccount: setCurrentAccountAdapter,
    getCurrentAccount: getCurrentAccountAdapter
  }
  return (
    <RecoilRoot initializeState={({ set }) => set(currentAccountState, state)}>
      <BrowserRouter>
        <Switch>
          <Route path="/login" exact component={makeLogin} />
          <Route path="/signup" exact component={makeSignUp} />
          <PrivateRoute path="/" exact component={makeSurveyList} />
          <PrivateRoute path="/surveys/:id" component={makeSurveyResult} />
        </Switch>
      </BrowserRouter>
    </RecoilRoot>
  )
}
Example #6
Source File: App.test.tsx    From Riakuto-StartingReact-ja3.1 with Apache License 2.0 6 votes vote down vote up 
test('renders learn react link', () => {
  const { getByText } = render(
    <RecoilRoot>
      <App />
    </RecoilRoot>,
  );
  const textElement = getByText(/ビーズカウンター/i);
  expect(textElement).toBeInTheDocument();
});
Example #7
Source File: index.tsx    From life-calendar with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider resetCSS theme={customTheme}>
      <RecoilRoot>
        <App dataString={dataStr} />
      </RecoilRoot>
    </ChakraProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #8
Source File: react-recoil-hooks-testing-library.tsx    From react-recoil-hooks-testing-library with MIT License 6 votes vote down vote up 
function recoilStateWrapper(options?: RenderHookOptions) {
  const StateComponent: React.FC<MockRecoilState> = (
    props: MockRecoilState,
  ) => {
    const setState = useSetRecoilState(props.recoilState);
    useEffect(() => {
      setState(props.initialValue);
    }, []);

    return null;
  };

  const renderStateComponents = () => {
    return options?.states?.map(state => (
      <StateComponent key={state.recoilState.key} {...state} />
    ));
  };

  return (props: { children?: React.ReactNode }) => {
    const renderChildren = options?.wrapper ? (
      <options.wrapper {...props} />
    ) : (
      props.children
    );

    return (
      <RecoilRoot>
        {renderStateComponents()}
        {renderChildren}
      </RecoilRoot>
    );
  };
}
Example #9
Source File: App.tsx    From rocketredis with MIT License 6 votes vote down vote up 
App = () => {
  return (
    <RecoilRoot>
      <ThemeProvider theme={defaultTheme}>
        <AppProvider>
          <Screen />
        </AppProvider>
        <GlobalStyle />
      </ThemeProvider>
    </RecoilRoot>
  )
}
Example #10
Source File: index.tsx    From abrechnung with GNU Affero General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
    <React.StrictMode>
        <RecoilRoot>
            <Suspense fallback={<Loading />}>
                <App />
            </Suspense>
        </RecoilRoot>
    </React.StrictMode>,
    document.getElementById("root")
);
Example #11
Source File: App.tsx    From wiregui with MIT License 6 votes vote down vote up 
export default function () {
  return (
    <RecoilRoot>
      <Provider store={store}>
        <App />
      </Provider>
    </RecoilRoot>
  );
}
Example #12
Source File: index.tsx    From mojito_pdm with Creative Commons Attribution Share Alike 4.0 International 6 votes vote down vote up 
ReactDOM.render(

    <StyledEngineProvider injectFirst>
        <RecoilRoot>
            <App/>
        </RecoilRoot>
    </StyledEngineProvider>,
    document.getElementById('root')
);
Example #13
Source File: ClientsWidget.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<ClientsWidget />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <ClientsWidget />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #14
Source File: ClientListDetail.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<ClientListDetail />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <ClientListDetail />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #15
Source File: App.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <RecoilRoot>
          <Suspense fallback={<span>Loading...</span>}>
          <Testimonials />
          </Suspense>
        </RecoilRoot>
          <p />
      </header>
    </div>
  )
}
Example #16
Source File: _app.tsx    From frames with Mozilla Public License 2.0 6 votes vote down vote up 
export default function MyApp({Component, pageProps}: AppProps) {
    NProgress.configure({trickleSpeed: 1200, showSpinner: false, easing: 'ease-in-out', speed: 500});
    const {loading} = useDetectPageChange();

    useEffect(() => {
        loading ? NProgress.start() : NProgress.done();
    }, [loading]);

    return (
        <RecoilRoot>
            <FramesConsumers>
                <Component {...pageProps} />
            </FramesConsumers>
        </RecoilRoot>
    )
}
Example #17
Source File: AppRouter.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
AppRouter: FunctionComponent = () => {
  return (
    <Router>
      <RecoilRoot>
        <Suspense fallback={<span>Loading...</span>}>
          <Switch>
            <Route exact path="/" component={App} />
          </Switch>
        </Suspense>
      </RecoilRoot>
    </Router>
  )
}
Example #18
Source File: NetworkWidget.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<NetworkWidget />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <NetworkWidget />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #19
Source File: TemplateName.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<TemplateName />', () => {
  let component

  beforeEach(() => {
    component = shallow(<RecoilRoot><TemplateName /></RecoilRoot>)
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #20
Source File: AppRouter.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
AppRouter: FunctionComponent = () => {
  return (
    <Router>
      <RecoilRoot>
        <Suspense fallback={<span>Loading...</span>}>
          <Switch>
            <Route exact path="/" component={App} />
          </Switch>
        </Suspense>
      </RecoilRoot>
    </Router>
  )
}
Example #21
Source File: TemplateName.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<TemplateName />', () => {
  let component

  beforeEach(() => {
    component = shallow(<RecoilRoot><TemplateName /></RecoilRoot>)
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #22
Source File: BubbleChart.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<BubbleChart />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <BubbleChart bubblesData={[]} width={800} height={600} textFillColor="drakgrey" backgroundColor="#ffffff" minValue={1} maxValue={150} selectedCircle={Function} />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #23
Source File: Histogram.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<Histogram />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <Histogram data={[]} margin={{ top: 20, right: 45, bottom: 20, left: 50 }} width={400} height={400} fill="tomato" />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #24
Source File: HistogramWidget.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<HistogramWidget />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <HistogramWidget />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #25
Source File: AppRouter.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
AppRouter: FunctionComponent = () => {
  return (
    <Router>
      <ScrollToTop />
      <RecoilRoot>
        <Suspense fallback={<span>Loading...</span>}>
          <Switch>
            <Route exact path="/" component={App} />
            {/* without Quicklink
            <Route exact path="/MyPage" component={MyPage} />
            */}
            <Route exact path="/MyPage" component={withQuicklink(MyPage, options)} />
            <Redirect to="/" />
          </Switch>
        </Suspense>
      </RecoilRoot>
    </Router>
  )
}
Example #26
Source File: AppRouter.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
AppRouter: FunctionComponent = () => {
  useEffect(() => {
    // TODO
  }, [])
  return (
    <Router>
      <RecoilRoot>
        <Suspense fallback={<span>Loading...</span>}>
          <Switch>
            <Route exact path="/" component={App} />
            <Route exact path="/contact" component={ContactPage} />
            <Route exact path="/books" component={BooksPage} />
          </Switch>
        </Suspense>
      </RecoilRoot>
    </Router>
  )
}
Example #27
Source File: App.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <RecoilRoot>
          <Suspense fallback={<span>Loading...</span>}>
          <Articles />
          </Suspense>
        </RecoilRoot>
          <p />
      </header>
    </div>
  )
}
Example #28
Source File: ClientList.test.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
describe('<ClientList />', () => {
  let component

  beforeEach(() => {
    component = shallow(
      <RecoilRoot>
        <ClientList />
      </RecoilRoot>
    )
  })

  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})
Example #29
Source File: index.tsx    From arduino-web-oscilloscope with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
)