README.md in quilt_rails-1.9.2 vs README.md in quilt_rails-1.10.0

- old
+ new

@@ -298,9 +298,70 @@ } export default App; ``` +##### Example: sending headers from Rails controller + +```ruby +class ReactController < ApplicationController + include Quilt::ReactRenderable + + def index + render_react(headers: { 'x-custom-header': 'header-value-a' }) + end +end +``` + +You will need to serialize the result of the useRequestHeader hook in order for it to persist to the client + +```tsx +// app/ui/foundation/CustomUniversalProvider.tsx +import {createContext} from 'react'; +import {createUniversalProvider} from '@shopify/react-universal-provider'; + +export const CustomContext = createContext<string | null>(null); +export const CustomUniversalProvider = createUniversalProvider('custom-key', CustomContext); +``` + +```tsx +// app/ui/index.tsx + +import React from 'react'; +import {useRequestHeader} from '@shopify/react-network'; +import {CustomUniversalProvider} from './foundation/CustomUniversalProvider'; +import {ComponentWithCustomHeader} from './components/ComponentWithCustomHeader'; + +function App() { + // get `x-custom-header` from the request that was sent through Rails ReactController + const customHeader = useRequestHeader('x-custom-header'); + + return ( + <CustomUniversalProvider value={customHeader}> + <h1>My application ❤️</h1> + <ComponentWithCustomHeader /> + </CustomUniversalProvider> + ); +} + +export default App; +``` + +```tsx +// app/ui/components/ComponentWithCustomHeader.tsx + +import React, {useContext} from 'react'; +import {CustomContext} from '../foundation/CustomUniversalProvider'; + +export function ComponentWithCustomHeader() { + // get `x-custom-header` from serialized context + // will be 'header-value-a' in this example + const customHeader = useContext(CustomContext); + + return <span>{customHeader}</span>; +} +``` + ##### Example: redirecting ```tsx // app/ui/index.tsx