generated fromuiwjs/react-monorepo-template
Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork0
React components will manage your changes to the document head
License
NotificationsYou must be signed in to change notification settings
uiwjs/react-head
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
React components will manage your changes to the document head, likereact-helmet
npm install @uiw/react-head
importReact,{useState}from"react";importHeadfrom'@uiw/react-head';exportdefaultfunctionApp(){const[count,setCount]=useState(1);constclick=()=>setCount(count+1)return(<divclassName="container"><Head><Head.MetacharSet="utf-8"/><Head.Title>{count} React Head</Head.Title><Head.Linkrel="canonical"href="https://uiwjs.github.io"/></Head><buttononClick={click}> Switch Title - "{count}"</button></div>);}
importReact,{useState}from"react";importHeadfrom'@uiw/react-head';constcss=`.box-test { color: red; }`exportdefaultfunctionApp(){return(<div><Head.Style>{css}</Head.Style><Head><Head.Style>{css}</Head.Style></Head><divclassName="box-test">Text Color</div></div>);}
outputs:
<head><style>.box-test {color: red; }</style><style>.box-test {color: red; }</style></head><!-- .... -->
importReact,{useState}from"react";importHeadfrom'@uiw/react-head';exportdefaultfunctionApp(){const[count,setCount]=useState(1);constclick=()=>setCount(count+1)return(<div><Head.Metaname="keywords"content="react-head,uiw,uiwjs"/><Head.MetacharSet="utf-8"/><Head.Metaname="description"content={`${count} React components will manage your changes to the document head.`}/><buttononClick={click}> Modify Meta name=description - "{count}"</button></div>);}
Outputs:
<head><metaname="keywords"content="react-head,uiw,uiwjs"><metaname="description"content="1 React components will manage your changes to the document head."></head>
<Head.Linkrel="icon"href="/favicon.ico"/><Head.Linkrel="icon"type="image/svg+xml"href="/favicon.svg"/>
importReact,{useState}from"react";importHeadfrom'@uiw/react-head';constfavicon=`data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦖</text></svg>`constfavicon2=`data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>`exportdefaultfunctionApp(){const[show,setShow]=useState(false);return(<div><Head.Linkrel="icon"type="image/svg+xml"href={show ?favicon :favicon2}/><buttononClick={()=>setShow(!show)}> Change Favicon{show ?"🦖" :"🤡"}{String(show)}</button></div>);}
Outputs:
<head><linkdata-head="true"rel="icon"href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>"/></head>
Elements that can be used inside the<head>:
<title>-><Head.Title><base>-><Head.Base><link>-><Head.Link><style>-><Head.Style><meta>-><Head.Meta>
- Dependencies in the installation package and example
npm install
- To develop, run the self-reloading build:
npm run build# Compile packages 📦 @uiw/react-headnpm run watch# Real-time compilation 📦 @uiw/react-head
- Run Document Website Environment:
npm run start
- To contribute, please fork repos, add your patch and tests for it (in the
test/folder) and submit a pull request.
npm runtestAs always, thanks to our amazing contributors!
Made withcontributors.
Licensed under the MIT License.
About
React components will manage your changes to the document head
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.