Don't Support this package

License

• MIT License

Install

  npm i justreact-ui

Demo & Examples

Demo

CARD-1

Props

glass, glassOption

  import { Card } from 'justreact-ui';

  // default blur:4, transparency:0.2
  const NewCard = () => <Card glass><div>HelloWorld</div></Card>);

  const NewCard = () => <Card glass glassOption={{blur:5,transparency: 0.1}}><div>HelloWorld</div></Card>);

style

  import Card from 'justreact-ui';
  const NewCard = () => <Card style={{"color":"red"}}><div>HelloWorld</div></Card>);

background

  import Card from 'justreact-ui';
  const NewCard = () => <Card background={"red"}><div>HelloWorld</div></Card>);

hoverType

  type hoverMoveType = 'up' | 'left' | `right` | `down` | 'zoom'

  import Card from 'justreact-ui';
  const NewCard = () => <Card hoverType={"zoom"}><div>HelloWorld</div></Card>);

bordered

  import Card from 'justreact-ui';
  const NewCard = () => <Card bordered><div>HelloWorld</div></Card>);

outlined

  import Card from 'justreact-ui';
  const NewCard = () => <Card outlined><div>HelloWorld</div></Card>);

ColorPallets

ColorProvider

import { ColorProvider } from "justreact-ui";

// default blur:4, transparency:0.2
const App = () => {
  <ColorProvider>
    <Layout />
  </ColorProvider>;
};

useColor()

import { useColor, Card } from "justreact-ui";

const component = () => {
  const { color, handleColorChange } = useColor();

  return (
    <div className={` bg-gradient-t from-[${color.colors[1]}] to-[${color.colors[0]}] transition-all duration-400`}>

     {Array.from({length:5}).map(_, index)=><Card key={index} onMouseEnter={()=>handleColorChange()}>}
    </div>
  )
};

justreact-ui

Magnify-image (e-commerce)

src, alt, width, height

600px is the default width and height.

import { ImageMag } from "justreact-ui";

const Image = () => {
  return (
    <ImageMag
      src="/example.png"
      alt="example"
      width={500}
      height={500}
      scale={1.5}
    />
  );
};

Loader

import { Loader } from "justreact-ui";

const App = () => {
  return <Loader color="red" type="dots" size={50} />;
};

Props Types

type: "spinner" | "dots" | "bars" | "ellipsis" | "pulse" | "ripple" | "dual-ring" | "heart" | "circle" | "grid"

color:string

size:number