Fc-card-component NPM

FCComponent (Flip card component)

Installation
Usage
Documentation
Color guide
Exemple
Contribute
License

Installation

npm i fc-component

Usage

import React from 'react';
import FlipCard from 'fc-component';

function App() {
  return <div>
    <FlipCard />
  </div>
}

Documentation

Property	Type	Description	Options
colorFront	`String`	Background color for front card	ref. Color guide
colorBack	`String`	Background color for back card	ref. Color guide
textColorFront	`String`	Text color for front card	ref. Color guide
textColorBack	`String`	Text color for back card	ref. Color guide
textFront	`String`	Text will display on front card	Any string
textBack	`String`	Text will display on back card	Any String
height	`Number`	Height of component	1...∞
width	`Number`	Width of component	1...∞
innerPadding	`Number`	Padding of component	1...∞
fontSize	`Number`	Size of font, attribute for textFront and textBack	1...∞
rotationAxis	`String`	The axis of rotation on which the card will rotate.	`"x"` or `"y"`

Color

Exemple

import FlipCard from "fc-component";

function App() {
  return (
    <div className="App">
      <FlipCard
        height={400}
        width={300}
        rotationAxis="x"
        colorFront="dark-black"
        textColorFront="light-orange"
        textColorBack="purple"
        textFront="Voici un exemple de Custom Flip Card"
        textBack="ENJOY THIS !"
        innerPadding={20}
        fontSize={27}
      />
    </div>
  );
}

export default App;

Exemple 2

import FlipCard from "fc-component";

function App() {
  return (
    <div className="App">
      <FlipCard
        height={400}
        width={300}
        rotationAxis="x"
        colorFront="light-blue"
        textColorFront="dark-black"
        textColorBack="purple"
        textFront="Bienvenue sur mon REPO !"
        textBack="ENJOY THIS !"
        innerPadding={30}
        fontSize={32}
      />
    </div>
  );
}

export default App;

Exemple 3

import FlipCard from "fc-component";

function App() {
  return (
    <div className="App">
      <FlipCard
        height={400}
        width={300}
        rotationAxis="y"
        colorFront="light-green"
        colorBack="dark-green"
        textColorFront="dark-black"
        textColorBack="dark-black"
        textFront="You love IT ?"
        textBack="Star my repo to tell me ❤️"
        innerPadding={30}
        fontSize={40}
      />
    </div>
  );
}

export default App;

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome!

License

Licensed under MIT

@infinitebrahmanuniverse/nolb-fc @everything-registry/sub-chunk-1653

0.1.0

3 years ago