@motioned-official/react-components v1.0.2

Installation

To install the package, make sure you have node and npm installed in your local machine. You may use the package manager other than npm such as yarn to install the package.

# inside your root directory
npm install @motioned-official/react-components
# or
yarn add @motioned-official/react-components

After installation you should be able to see in your package.json file the following dependency list.

{
  "dependencies": {
    "@motioned-official/react-components": "^<version-tag>"
  }
}

Usage

TIP - to use provided package's components, you may import in your jsx or tsx file where you write your typical react code.

MReact

// Example.jsx
import {MReact} from "@motioned-official/react-components"
const ExampleComponent = () => {
    return (
        <MReact.Section id="hero">
            <MReact.Wrap>
                <MReact.Content displayType="block">
                    <h1>Hello World!</h1>
                <MReact.Content>
            <MReact.Wrap>
        </MReact.Section>
    )
}
export default ExampleComponent;

// Example.tsx
import {MReact} from "@motioned-official/react-components"

interface ExampleComponentProps {
    title?: string;
}
const ExampleComponent : React.FC<ExampleComponentProps> = ({title}) => {
    return (
        <MReact.Section id="hero">
            <MReact.Wrap>
                <MReact.Content displayType="block">
                    <h1>{title ?? 'Hello World!'}</h1>
                <MReact.Content>
            <MReact.Wrap>
        </MReact.Section>
    )
}
export default ExampleComponent;

MNext

// pages/index.jsx
import { MNext, MReact } from "@motioned-official/react-components";

const indexMeta = {
  title: {
    default: "My Page",
    subString: "Home",
    joinBy: "|",
  },
  keywords: {
    words: ["Web Development", "React", "Next"],
    joinBy: ", ",
  },
  description:
    "This is my NextJS portfolio page. Explore my projects & learn more about me!",
};

const Home = () => {
  return (
    <React.Fragment>
      <MNext.SEO {...indexMeta} />
      <MReact.Section id="hero">
        <MReact.Wrap>
          <MReact.Content displayType="block">
            <h1>Hello World!</h1>
          </MReact.Content>
        </MReact.Wrap>
      </MReact.Section>
    </React.Fragment>
  );
};

export default Home;

// pages/index.tsx
import { MNext, MReact } from "@motioned-official/react-components";
import type { NextPage } from "next";

const indexMeta = {
  title: {
    default: "My Page",
    subString: "Home",
    joinBy: "|",
  },
  keywords: {
    words: ["Web Development", "React", "Next"],
    joinBy: ", ",
  },
  description:
    "This is my NextJS portfolio page. Explore my projects & learn more about me!",
};

const Home: NextPage = () => {
  return (
    <React.Fragment>
      <MNext.SEO {...indexMeta} />
      <MReact.Section id="hero">
        <MReact.Wrap>
          <MReact.Content displayType="block">
            <h1>Hello World!</h1>
          </MReact.Content>
        </MReact.Wrap>
      </MReact.Section>
    </React.Fragment>
  );
};

export default Home;