importReact,{useState,useEffect}from'react'import{Console,Hook,Unhook}from'console-feed'constLogsContainer=()=>{const[logs,setLogs]=useState([])// run once!useEffect(()=>{Hook(window.console,(log)=>setLogs((currLogs)=>[...currLogs,log]),false)return()=>Unhook(window.console)},[])return<Consolelogs={logs}variant="dark"/>}export{LogsContainer}
Props for <Console /> component
logs: Log[]
An array consisting of Log objects. Required
filter?: Methods[]
Filter the logs, only displaying messages of certain methods.
variant?: 'light' | 'dark'
Sets the font color for the component. Default - light
styles?: Styles
Defines the custom styles to use on the component - see Styles.d.ts
searchKeywords?: string
A string value to filter logs
logFilter?: Function
If you want to use a custom log filter function, you can provide your own implementation
Log methods
Each log has a method assigned to it. The method is used to determine the style of the message and for the filter prop.
typeLogs=Log[]interfaceLog{// The log methodmethod: Methods// The arguments passed to console APIdata: any[]}
Serialization
By default when you use the Hook() API, logs are serialized so that they will safely work with JSON.stringify. In order to restore a log back to format compatible with the <Console /> component, you need to call the Decode() method.
Disabling serialization
If the Hook function and the <Console /> component are on the same origin, you can disable serialization to increase performance.
You can limit the number of keys/elements included when serializing objects/arrays.
Hook(window.console,(log)=>{this.setState(({ logs })=>({logs: [...logs,log]}))},true,100// limit to 100 keys/elements)
Developing
To run console-feed locally, simply run:
yarn
yarn start
yarn test:watch
Head over to http://localhost:3000 in your browser, and you'll see the demo page come up. After you make changes you'll need to reload, but the jest tests will automatically restart.
请发表评论