github readme component api kit

⚠️ WARNING
<foreignObject> behavior different on mobile and pc browser, content inside svg not scale into correct width and height on iOS Safari or Chrome browser. If you want to use it in mobile browser, you should pass width & height with url query. e.g. https://endpoints.svg?width=<width>&heigth=<height>.

In React

import useMeasure from 'react-use-measure'

const RealmeImage = () => {
  const [ref, bounds] = useMeasure()
  return (
    <div className="w-full" ref={ref}>
      <img src={`https://endpoints.svg?width=${bounds.width}&height=${bounds.height}`} />
    </div>
  )  
} 

usage

banner

![banner](
  https://realme-ten.vercel.app/api/v1/banner.svg
  ?colorA=831843
  &colorB=be185d
  &textColor=f472b6
  &title=World!
  &subtitle=Hello
)

👇

▲ banner / playground

(recommended) pick color from tailwindcss, 900 -> colorA, 700 -> colorB, 400 -> textColor

webgradients

![webgradients](
  https://realme-ten.vercel.app/api/v1/webgradients.svg
  ?title=hello+world
  &subtitle=indiehackers
  &desc=happy+hacking
  &radialgradiets=true
  &webgradientsName=HappyFisher

👇

▲ webgradients / playground

typical

![typical](
  https://realme-ten.vercel.app/api/v1/typical.svg
  ?steps=hello
  &steps=1000
  &steps=hello%20world
  &steps=500
  &steps=hello%20realme

👇

▲ typical / playground

mdx

![mdx](
  https://realme-ten.vercel.app/api/v1/mdx.svg
  ?remoteContent=https://ungh.cc/repos/JiangWeixian/realme/files/master/docs/mdx.mdx

👇

▲ mdx / playground

devices

![devices-iphonex](
  https://realme-ten.vercel.app/api/v1/devices.svg
  ?webgradientsName=BlueVelvet
  &width=800&height=400
  &type=iphonex
  &imgSrc=https://images.unsplash.com/photo-1527842891421-42eec6e703ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80

👇

▲ devices / playground

![devices-ipadpro](
  https://realme-ten.vercel.app/api/v1/devices.svg
  ?webgradientsName=BlueVelvet
  &width=800&height=400
  &type=ipadpro
  &imgSrc=https://images.unsplash.com/photo-1527842891421-42eec6e703ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80

👇

▲ devices / playground

built with ❤️ by jiangweixian

unstable

code-highlight

![codehighlight](
  https://realme-ten.vercel.app/api/v1/code-highlight
  ?path=/JiangWeixian/realme/master/README.md
  &range=L10-L13&title=README.md
)

👇

▲ code-highlight / demo

params

name	description	type	default	required
title	code highlight title	string	Untitled-1	false
url	file remote raw url	string	-	true
path	file remote path, without github raw prefix, etc /JiangWeixian/realme/master/README.md	string	-	true
range	line number range, etc L17-L20	string	-	true
height	image height	number	-	false
bg	background web-gradients type, etc Warm Flame, you can find all kinds of webgradients here	string	Warm Flame	false

sliders

![sliders](
  https://realme-ten.vercel.app/api/v1/sliders
  ?props=https://jsonkeeper.com/b/5FE5
)

👇

▲ sliders / demo

params

name	description	type	default	required
props	siders props remote raw url	string	-	true