nexment
v0.0.69
Published
A feature-rich serverless comment library for React
Downloads
62
Readme
Foreword
Note This project is undergoing a major refactoring, stay tune for exciting updates to come.
See also
- Nexment for Vue.js / Web Component https://github.com/ttttonyhe/nexment-vue
- Nexment for React.js https://github.com/ttttonyhe/nexment
Docs
Visit Nexment documentation site at https://nexment.ouorz.com
Demo
Visit Nexment demo site at https://nexment-demo.ouorz.com
Installation
Part I - LeanCloud
- Register / Login LeanCloud
- Create an App in Dashboard
- Go to Your App => LeanStorage tab => Objects
- Create a class named "test" using default settings
- Go to Your App => Settings tab => App keys
- Copy AppID and AppKey
- Configure REST API Server URL. For configuration instructions, see How to Specify API Server URL (Chinese)
- Go to Your App => Settings tab => Security and add your project domain to Web secure domains
Part II - Nexment
Add Nexment to your project dependencies using Yarn:
yarn add nexment
or using NPM:
npm install nexment
Use Nexment in your project:
Import nexment library:
import Nexment from "nexment"
Setup nexment configuration:
const config = {
pageKey: 'xxx' | undefined;
features: {
linkInput: true | false | undefined,
replyListModal: true | false | undefined,
replyEmailNotifications: true | false | undefined,
descriptionTag: true | false | undefined,
} | undefined,
leancloud: {
appId: 'xxx',
appKey: 'xxx',
serverURL: 'https://xxx.xxx',
},
admin: {
name: 'xxx',
email: '[email protected]',
},
blackList:[{
name: "xxx",
email: "xxx",
keyword: "xxx",
link: "xxx"
},
{
keyword: "xxx"
}]
};
Use the nexment component:
<Nexment config={config} />
Use Nexment in Next.js
Create a Nexment component(Nexment.tsx):
import React from "react";
import Nexment from "nexment";
const Nexment = () => {
const config = {
pageKey: "xxx",
features: {
linkInput: true,
replyListModal: true,
replyEmailNotifications: true,
descriptionTag: true,
},
leancloud: {
appId: "xxx",
appKey: "xxx",
serverURL: "xxx",
},
admin: {
name: "xxx",
email: "xxx",
},
blackList:[
{
name: "xxx",
email: "xxx",
keyword: "xxx",
link: "xxx"
},
{
keyword: "xxx"
}
]
};
return <Nexment config={config} />;
};
export default Nexment;
import this Nexment component anywhere in your project using "next/dynamic":
import dynamic from "next/dynamic";
const NexmentDiv = dynamic(() => import("./Nexment"), {
ssr: false,
});
const Index = () =>{
return (
<div>
<NexmentDiv />
</div>
)
}
export default Index;
TypeScript Support
Nexment for React has full support for TypeScript type-checking
Roadmap
See Github projects→
Sponsor
Your name will be on the list Sponsors
Contribution
File an issue whenever you encountered a problem, pull requests are always welcomed