DEV Community

loading...
Cover image for Project 43 of 100 - Resurrecting Clippy into a React JSX Component

Project 43 of 100 - Resurrecting Clippy into a React JSX Component

jwhubert91 profile image James Hubert ・2 min read

Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

Just a short post today. I meant to publish an npm package for this component following this pretty good tutorial on dev.to about doing that with create-react-library. Link: How to Publish a Custom React Component to NPM... However, after publishing the npm package (link here)[https://www.npmjs.com/package/mr-clips] I discovered that I could not install it using npm install and got a significant error about conflicting React versions since I believe create-react-library ships with a slightly older version of React. I'll push that off to tomorrow's project.

In the meantime, I do feel I accomplished a lot with today's project- by reviving a beloved early 2000's era chatbot, Clippy. My component, which I call Mr Clips, can be imported into any page in a React project with just a little bit of code. From the readme:

import MrClips from 'mr-clips'

function App() {
    return (<MrClips height={200} />)
}
Enter fullscreen mode Exit fullscreen mode

As the readme mentions, you do need to create a height prop for the MrClips component.

Tomorrow I'll deal with the error and upload a working version to npm for all to use. In the year of the meme currency and meme stock swings- it would be cool if Mr Clips aka Clippy became a commonly used chatbot throughout the web- why not?

Discussion (0)

pic
Editor guide