react-made-by

    1.0.3 • Public • Published

    MIT NPM Version npm downloads build status code style: prettier PRs Welcome

    React-Made-By

    React-Made-By is a simple component to display author name at the bottom right corner of a page such as this "Made with by Me" alongside with an image.

    Demo tag

    Features

    • Displays user's text at the bottom right corner (it defaults to right but can be changed to be left ) of the page
    • Displays image
    • Links to a destination url when the component is clicked.

    Why

    Because I was looking for an excuse to build a standalone component and publish it in the wild? To be honest, I needed a "created by" component that provided the above features for my projects. Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.

    Demo

    img

    Check it out here

    Installation

    The preferred way of using the component is via NPM

    npm install --save react-made-by
    

    make sure you have installed the peer dependencies as well with below versions

    react: ^16.8.0,
    react-dom": ^16.8.0
    
    

    It is, however, also available to be used separately (build/index.js). This file is hosted here

    Usage

    Here's a sample implementation that creates the "Made By {NAME}" the component on default Create-React-App page.

    import React from "react";
    import logo from "./logo.svg";
    import "./App.css";
    import MadeBy from "react-made-by";
    
    function App() {
    	return (
    		<div className="App">
    			<header className="App-header">
    				<img src={logo} className="App-logo" alt="logo" />
    				<p>
    					Edit <code>src/App.js</code> and save to reload.
    				</p>
    				<a
    					className="App-link"
    					href="https://reactjs.org"
    					target="_blank"
    					rel="noopener noreferrer"
    				>
    					Learn React
    				</a>
    			</header>
    			<MadeBy
    				imgsrc="https://ya332.github.io/assets/img/headshot_400x300.jpg"
    				destination="https://ya332.github.io"
    				text="Made with ☕ by Yigit"
    				imgfirst={true}
    				position="left"
    				style={{zIndex:'1'}}
    
    			/>
    		</div>
    	);
    }
    
    export default App;
    const MadeBy = require("react-made-by");

    If you have ideas to make this component better, I'd love to hear.

    Options

    Option Type Default Description
    text String Made with lots of ☕! Text to be displayed
    destination String "" URL string. When clicked on the tag, a new tab with this destination url opens
    imgsrc String "" src of the image displayed on the component.
    position String "right" Location of the tag on the screen. Potential values are 'left' and 'right'
    imgfirst Boolean true When set to true, the component displays img and then p element. When set to false, it displays the p and then img element. Potential values are true and false
    style JSON Object DefaultMadeByStyles (for more info check the source code) You can pass any CSS field via style, and it will override. For example, style={{marginTop:'34234px'}}

    Sample Usage:

    <MadeBy
    	imgsrc="https://ya332.github.io/assets/img/headshot_400x300.jpg"
    	destination="https://ya332.github.io"
    	text="Made with ☕ by Yigit"
    	imgfirst={true}
    	position="left"
    	style={{zIndex:'1'}}
    />

    Styling

    It is very easy to customize the look of the component the way you want it. If you need to set your own class names on the component, you may pass css attributes via style field.

    ...
      <MadeBy
      	...
        style={{
    		zIndex: '1231',
    		paddingEnd:'43px',
    		marginTop:'231231px'
    	}}
    	...
    ...

    Dev

    The component is written in ES6 and uses Webpack as its build tool.

    Set up instructions

    Easiest way is to go to here and start playing with it.

    You can add the example/src/MadeBy.js file to your project as a component, or you can link a test create-react-app project to react-made-by library. To do the link, follow these steps: Given that you are at /app/ and react-made-by is at this directory /app/react-made-by:

    npx create-react-app test-react-made-by
    cd test-react-made-by
    npm install
    npm link
    cd ../react-made-by
    npm link test-react-made-by

    If you get Invalid Hooks Warning, check this (link)[https://reactjs.org/warnings/invalid-hook-call-warning.html] and do npm link ../test-react-made-by/node_modules/react from /app/react-made-by

    Doing the following will watch the files, but not run a webpack-dev-server on a browser, so you can't see your changes.

    git clone git@github.com:ya332/react-made-by.git
    cd react-made-by
    npm install
    npm run start
    

    open http://localhost:3000/build

    Contributing

    Got ideas on how to make this better? Open an issue here!

    Also thanks to the awesome contributors who've made the library far better!

    Install

    npm i react-made-by

    DownloadsWeekly Downloads

    17

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    14.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar