@fecapark-stack/react

Github

React utilities for fast coding.

Install & Import

npm install @fecapark-stack/react

yarn add @fecapark-stack/react

then,

import { ... } from "@fecapark-stack/react";

IconWrapper

component

Use for centerize icon.
Recommend react-icons for here.

Usage

import { IconWrapper } from "@fecapark-stack/react";

<IconWrapper>
  <svg>...</svg>
</IconWrapper>;

• For styling, use style props.

import { IconWrapper } from "@fecapark-stack/react";

<IconWrapper style={{ width: 100, height: 100, borderRadius: "50%" }}>
  <svg>...</svg>
</IconWrapper>;

• Or in Tailwind,

import { IconWrapper } from "@fecapark-stack/react";

<IconWrapper className="w-12 h-12 rounded-lg">
  <svg>...</svg>
</IconWrapper>;

FullSlider

component

Use for slide items.
This slider's width size is browser's screen width(default, can customize max width).

demo

Usage

import { FullSlider } from "@fecapark-stack/react";

const items = [
  <div>1</div>,
  <div>2</div>,
  <div>3</div>,
  <div>4</div>,
  <div>5</div>,
];

<FullSlider items={items} cols={3} />;

• For styling, use style props.

import { IconWrapper } from "@fecapark-stack/react";

<FullSlider
  items={items}
  cols={3}
  style={{
    inActiveOpacity: 0.5,
    gap: 24,
    maxContainerWidth: 1200,
  }}
/>;

• style props (all props are optional)

name	description	type	default value
inActiveOpacity	Opacity value of not focused items.	number	0.5
gap	Gap size between slider items.	number(pixel)	48(px)
maxContainerWidth	Max slider view width about window resizing	number(pixel)	Infinity

useFunnel

hooks

Use for optimize sequential form contents.

Simple implementation of @toss/slash/useFunnel.

• references below
• docs
• github

Usage

import { useFunnel } from "@fecapark-stack/react";

type FunnelStepsType = "Content1" | "Content2" | "Content3";

function Component() {
  const [Funnel, setStep] = useFunnel<FunnelStepsType>("Content1"); // initial step

  return (
    <Funnel>
      <Funnel.Step name="Content1">
        <AnyContent1 onSubmit={() => setStep("Content2")} />
      </Funnel.Step>

      <Funnel.Step name="Content2">
        <AnyContent2 onSubmit={() => setStep("Content3")} />
      </Funnel.Step>

      <Funnel.Step name="Content3">
        <AnyContent3 />
      </Funnel.Step>
    </Funnel>
  );
}